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内 容 简介 


本 书 以 应 用 实践 、 创 新 型 人 才 培 养 方案 为 指导 ,以 培养 学 生 的 实际 动手 能 力 为 目标 ,以 提高 学 生 的 认 
知 能 力 为 前 提 , 从 实用 的 角度 出 发 ,以 简明 生动 的 语言 ,采用 案例 式 教学 ,由 浅 入 深 地 介绍 最 新 的 HTML5、 
CSS3 ,JavaScript 的 基本 语法 ,循序 渐进 地 讲述 网 页 前 台 技 术 , 从 基本 概念 到 具体 实践 ,从 页 面 结 构建 设 到 
页 面 布 局 都 进行 了 详细 的 阐述 ,并 进行 了 细致 的 实例 讲解 。 

全 书 共 12 章 , 分 别 介绍 网 页 设计 入 门 制作 网 页 内 容 、 超 级 链接 、 用 HTML 布局 网 页 、 表 单 ,.CSS 样式 
表 基 础 .CSS 布局 .CSS 网 页 元 素 设计 、JavaScript 基础 JavaScript 核心 对 象 . 事 件 响 应 及 综合 实例 。 每 章 
还 精心 设计 了 “上 机 练习 与 指导 ”和 “本 章 习题 ”, 既 可 以 让 教师 合理 安排 教学 实践 内 容 , 又 可 以 让 学 习 者 举 
一 反 三 ,快速 掌握 本 章 知识 。 

本 书 以 * 讲 清 语法 .学 以 致 用 ?为 指导 思想 ,其 特点 是 语言 平实 ,贴近 初级 读者 ,不 仅仅 将 笔墨 局 限于 语 
法 的 讲解 上 ,还 通过 一 个 个 典型 的 小 实例 来 达到 学 以 致 用 的 目的 ,加 强 了 本 书 的 可 自学 性 ,其 内 容 精 练 , 表 
述 清晰 ,实例 丰富 。 

本 书 可 作为 高 等 院 校 高 职 院 校 计算 机 专业 及 相关 专业 的 教材 ,也 可 作为 从 事 网 页 设计 与 制作 、 网 站 
开发 .网 页 编程 等 行业 人 员 的 参考 教材 。 
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随 着 Internet 的 普及 及 智能 终端 应 用 需求 的 大 量 涌现 ,人 们 对 网 页 制作 的 应 用 已 经 越 
来 越 广泛 。 简 单 的 网 页 制作 软件 已 经 不 能 满足 大 多 数 人 的 需求 。HTML5 和 CSS3 技术 的 
更 新 ,更 加 优化 了 网 页 制作 的 技术 标准 。 

本 书面 向 初 、 中 级 用 户 ,主要 学 习 前 台 浏览 器 端 技术 ,也 就 是 静态 页 面 的 制作 技术 。 早 
期 的 网 页 制作 只 需要 使 用 HTML 即 可 单独 完成 前 台 网 页 制作 ,而 现在 则 需要 学 习 整 个 
Web 标准 体系 才能 完成 规范 的 前 台 网 页 制作 。 在 Web 标准 中 ,HTML/XHTML 负责 页 面 
结构 ,CSS 负责 样式 表现 , JavaScript 负责 动态 行为 。 本 书 结合 HTML5 十 CSS3 十 
JavaScript 的 最 新 规范 ,从 基本 的 语法 入 手 ,以 网 页 前 台 技 术 和 各 种 概念 和 理论 知识 为 主 
线 , 以 应 用 为 目标 ,通过 实例 系统 由 浅 和 人 深 地 阐述 了 如 何 运 用 HTML5 十 CSS3 十 JavaScript 
制作 网 页 。 

本 书 构思 科学 合理 ,理论 与 应 用 配合 紧密 ,语言 通俗 易 懂 , 既 可 作为 各 类 院 校 计算 机 专 
业 及 相关 专业 的 教材 ,也 可 作为 培训 机 构 相 关 专 业 的 培训 教材 。 

主要 内 容 

本 书 以 精简 的 内 容 循 序 渐进 地 讲述 了 网 页 制作 技术 从 基本 概念 到 HTML5 页 面 制作 、 
CSS3 样式 控制 .JavaScript 程序 的 动态 行为 和 综合 实例 。 

全 书 共 12 章 , 各 章 具 体内 容 如 下 。 

第 1 章 为 网 页 设计 入 门 , 主 要 介绍 网 页 设计 基础 知识 、 网 页 制作 相关 技术 .HTML 的 基 
本 语法 。 

第 2 章 为 制作 网 页 内 容 ,主要 介绍 使 用 HTML 制作 网 页 内 容 。 

第 3 章 为 超级 链接 ,主要 介绍 超级 链接 的 使 用 。 

第 4 章 为 用 HTML 布局 网 页 ,主要 介绍 使 用 HTML 的 表格 与 框架 布局 网 页 。 

第 5 章 为 表单 ,主要 介绍 HTML 表单 的 应 用 。 

第 6 章 为 CSS 样式 表 基 础 ,主要 介绍 Web 标准 的 基本 组 成 XHTML 的 基本 知识 ,CSS 
的 基本 语法 。 

第 7 章 为 CSS 布局 ,主要 介绍 使 用 CSS 对 网 页 进行 布局 。 

第 8 章 为 CSS 网 页 元 素 设计 ,主要 介绍 使 用 CSS 的 网 页 元 素 设计 网 页 内 容 。 

第 9 章 为 JavaScript 基础 ,主要 介绍 JavaScript 语言 的 基本 概念 JavaScript 核心 语法 、 
JavaScript 程序 控制 结构 。 

第 10 章 为 JavaScript 核心 对 象 ,主要 介绍 JavaScript 内 置 对 象 、 浏 览 器 对 象 模型 .文档 
对 象 模型 。 


Web 前 问 唐 计 与 开发 一 一 日 TML5 十 CSS3 十 JavaScript 向 课 版 





第 11 章 为 事件 响应 ,主要 介绍 JavaScript 脚本 中 的 事件 处 理 的 概念 ,方法 ,以 及 Event 
对 象 的 应 用 。 

第 12 章 为 综合 实例 ,运用 HTML 十 CSS 十 JavaScript 的 技术 和 方法 解决 实际 问题 。 

本 书 特点 

1. 教材 体系 结构 合理 

本 书 对 知识 的 安排 强调 整体 性 和 系统 性 ,知识 表达 强调 层次 性 和 有 序 性 ,概念 和 技术 逐 
层 推进 ,一 环 扣 一 环 , 便 于 读者 学 习 和 理解 。 

2. 实例 贯穿 知识 点 

本 书 自始至终 都 以 实例 引导 知识 点 的 学 习 , 通 过 实例 来 理解 概念 ,通过 应 用 来 熟悉 技 
术 ,理论 与 实际 相 结合 ,使 读者 易学 易 用 ,学 以 致 用 。 

3. 案例 实用 ,技术 较 新 

本 书 作者 均 从 事 过 网 页 制作 的 开发 工作 , 书 中 案例 都 是 以 最 新 标准 为 基础 ,介绍 
HTML5 十 CSS3 十 JavaScript 的 最 新 发 展 , 且 在 实际 开发 工作 中 经 常 碰 到 的 问题 在 案例 中 
都 有 体现 ,更 贴近 实用 。 

4. 注重 教学 实践 .加强 上 机 练习 与 指导 内 容 的 设计 

网 页 设计 与 制作 是 一 门 实践 性 很 强 的 课程 ,学习 者 只 有 亲自 动手 上 机 练习 ,才能 更 好 地 
掌握 教材 内 容 。 本 书 将 上 机 练习 的 内 容 设 计 成 “上 机 练习 与 指导 ”教学 单元 ,穿插 在 每 章 的 
最 后 ,教师 可 以 根据 课程 要 求 灵活 授课 和 安排 上 机 实践 。 读 者 可 以 根据 上 机 练习 与 指导 中 
介绍 的 方法 ,步骤 进行 上 机 实践 ,然后 根据 自己 的 情况 对 实例 进行 修改 和 扩展 ,以 加 深 对 其 
中 所 包含 的 概念 .原理 和 方法 的 理解 。 

本 书 作者 

本 书 作者 曾 从 事 多 年 的 网 页 设计 和 开发 工作 ,积累 了 丰富 的 设计 思想 和 方法 , 近 几 年 从 
事 高 校 教学 工作 ,作者 既 有 丰富 的 系统 开发 经 验 , 又 有 丰富 的 教学 经 验 ,是 主讲 网 页 制作 技 
术 的 一 线 教师 。 

本 书 主编 为 缪 亮 ( 负 责编 写 第 1 一 3 章 )、 陶 颖 (负责 编写 第 4 一 7 章 ), 副 主编 为 刘 洪 起 
(负责 编写 第 8 一 11 章 ) . 范 芸 ( 负 责编 写 第 12 章 ) 。 

纪 宏 伟 、 胡 伟 华 、 郭 刚 、 陈 凯 、 李 敏 , 张 海 、 丁 文 珂 、 囊 长 征 \ 何 红 玉 ,、 张 爱 文 , 姜 彬 彬 等 也 参 
与 了 部 分 创作 和 编写 工作 ,在 此 表示 感谢 。 另 外 ,感谢 开封 文化 艺术 职业 学 院 、 辽 宁 工 程 技 
术 大 学 、 大 庆 职 业 学 院 、 南 昌 理 工学 院 对 本 书 创作 给 予 的 支持 和 帮助 。 
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指正 。 
相关 资源 
立体 出 版 计划 ,为 读者 建构 全 方位 的 学 习 环 境 ! 
最 先进 的 建构 主义 学 习 理 论 告诉 我 们 ,建构 一 个 真正 意义 上 的 学 习 环 境 是 学 习 成 功 的 
关键 所 在 。 学 习 环境 中 有 真情 实 境 . 有 协商 和 对 话 , 有 共享 资源 的 支持 ,才能 高 效率 地 学 习 ， 
并 且 学 有 所 成 。 因 此 ,为 了 帮助 读者 建构 真正 意义 上 的 学 习 环 境 , 以 图 书 为 基础 ,为 读者 专 
设 一 个 图 书 服务 网 站 一 一 课件 吧 。 


网 站 提供 相关 图 书 资讯 ,以 及 相关 资料 下 载 和 读者 俱乐部 。 在 网 站 中 读者 可 以 得 到 更 
编 者 
2018 年 1 月 


多 、 更 新 的 共享 资源 ,还 可 以 交 到 志同道合 的 朋友 ,相互 交流 、 共 同 进步 。 


资源 网 站 网 址 : http://www. cai8. net。 
微 信 公 众 号 : itstudy。 
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第 1 章 网 页 设计 入 门 


随 着 万 维 网 的 飞速 发 展 ,各 种 Web 网 站 正如 雨后春笋 般 出 现 。 网 页 设计 技术 是 网 站 开 
发 的 基础 ,基于 Web 标准 的 网 页 设计 技术 是 当今 的 大 势 所 趋 。 在 Web 标准 中 , HTML/ 
XHTML 负责 页 面 结构 ,CSS 负责 样式 表现 ,JavaScript 负责 动态 行为 。 

本 章 主要 内 容 如 下 。 

。 网 页 设计 基础 知识 。 

。 网 页 制作 相关 技术 。 

。 HTML 入 门 。 

。 HTML5 基本 语法 。 


1.1 网 页 设计 基础 知识 


网 站 (Website) 是 由 若干 网 页 构成 的 ,这 些 网 页 按照 一 定 的 逻辑 关系 组 织 在 一 起 。 每 个 
网 页 都 包含 一 定 的 组 成 元 素 , 网 页 的 设计 与 制作 就 是 对 这 些 元 素 的 规划 和 构建 。 


1.1.1 网 站 和 网 页 


网 站 是 指 在 因特网 上 ,根据 一 定 的 规则 ,使 用 HTML 等 工具 制作 的 用 于 展示 特定 内 容 
的 相关 网 页 的 集合 。 简 单 地 说 ,网 站 是 一 种 通信 工具 ,就 像 布告 栏 一 样 ,人 们 可 以 通过 网 站 
来 发 布 自己 想 要 公开 的 资讯 ,或 者 利用 网 站 来 提供 相关 的 网 络 服务 。 人 们 可 以 通过 网 页 浏 
览 器 来 访问 网 站 ,获取 自己 需要 的 资讯 或 者 享受 网 络 服务 。 

网 站 由 域名 (Domain Name)、 网 页 和 网 站 空间 3 个 部 分 组 成 。 网 站 域名 就 是 在 访问 网 
站 时 在 浏览 器 地 址 栏 中 输入 的 网 址 ,如 www. 163. com( 网 易 的 一 级 域名 )、study. cai8. net 
(网 易 的 二 级 域名 )。 网 页 用 某 种 形式 的 HTML 来 编写 .多 个 网 页 由 超级 链接 联系 起 来 。 
网 站 空间 由 专门 的 独立 服务 器 或 租用 的 虚拟 主机 承担 ,网 页 需要 上 传 到 网 站 空间 中 ,才能 供 
浏览 者 访问 网 站 中 的 内 容 。 

网 站 是 一 个 整体 , 它 是 由 网 页 及 为 用 户 提 供 的 服务 构成 的 ,网 站 为 浏览 者 提供 的 内 容 是 
通过 网 页 展示 出 来 的 ,使 浏览 者 了 解 该 网 站 为 用 户 提供 的 服务 及 展示 的 信息 ,浏览 者 访问 网 
站 实际 上 就 是 浏览 网 页 。 网 页 经 由 网 址 (URL ) 来 识别 和 存 取 , 当 在 浏览 器 中 输入 网 址 后 ， 
浏览 器 可 以 从 WWW 上 下 载 指定 的 网 页 ,传送 到 本 地 计算 机 ,然后 再 通过 浏览 器 解释 网 页 
的 内 容 , 再 展现 到 窗口 中 。 

首页 (Home Page) 也 可 以 称 为 主页 , 它 是 一 个 单独 的 网 页 ,和 一 般 网 页 一 样 ,可 以 存放 
各 种 信息 ,同时 又 是 一 个 特殊 的 网 页 ,作为 整个 网 站 的 起 始点 和 汇总 点 ,是 浏览 者 访问 网 站 
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的 第 一 个 网 页 。 人 们 都 将 首页 作为 体现 网 站 形象 的 重 中 之 重 .也 是 网 站 所 有 信息 的 归 类 目 
录 或 者 分 类 索引 。 因 此 在 制作 首页 时 一 定 要 突出 重点 .分 类 准确 和 操作 方便 ,能 够 使 浏览 者 
在 看 到 主页 后 ,进一步 深入 关注 网 站 的 内 容 。 如 图 1-1 所 示 是 一 个 网 站 首页 布局 示意 图 。 
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图 1-1 网 站 首页 布局 示意 图 


1.1.2 网 页 基本 元 素 


不 同 的 网 页 虽然 内 容 千差万别 ,但 是 万 变 不 离 其 宗 , 所 有 的 网 页 都 是 由 网 页 基本 元 素 组 
成 的 。 下 面 介绍 网 页 中 常见 的 基本 元 素 。 

构成 网 页 的 基本 元 素 主 要 包括 文本 、 图 片 .水 平 线 、 表 格 、 表 单 超 链接 及 视频 、 动 画 等 各 
种 动态 多 媒体 元 素 。 

(1) 文本 : 文本 是 网 页 中 最 主要 的 信息 载体 .浏览 者 主要 通过 文字 了 解 各 种 信息 。 

(2) 图 片 : 图 片 可 以 使 网 页 看 上 去 更 加 美观 。 如 果 是 新 闻 类 或 说 明 类 网 页 ,插入 图 片 
后 可 以 让 浏览 者 更 加 快捷 地 了 解 网 页 所 要 表达 的 内 容 。 

(3) 水 平 线 : 在 网 页 中 主要 起 到 分 隔 区 域 的 功能 ,使 网 页 的 结构 更 加 美观 合理 。 

(4) 表格 : 表格 是 网 页 设计 过 程 中 使 用 最 多 的 基本 元 素 。 首 先 表格 可 以 显示 分 类 数 
据 , 其 次 使 用 表格 进行 网 页 排版 可 以 达到 更 好 的 定位 效果 。 

(5) 表单 : 访问 者 有 时 在 查找 一 些 信息 或 申请 一 些 服务 时 需要 向 网 页 提交 一 些 信息 ， 
这 些 信 息 就 是 通过 表单 的 方式 输入 到 Web 服务 器 ,并 根据 所 设置 的 表单 处 理 程序 进行 加 工 
处 理 的 。 表 单 中 包括 输入 文本 , 单 选 按钮 、 复 选 框 和 下 拉 菜 单 等 。 

(6) 超 链 接 : 超 链接 是 实现 网 页 按照 一 定 逻 辑 关 系 进 行 跳 转 的 元 素 。 一 般 情 况 下 在 济 
览 网 页 时 将 鼠标 指针 指向 具有 超 链接 的 文本 或 图 片 的 时 候 , 鼠 标 指 针 就 会 变 成 小 手 的 形状 。 

(7) 动态 多 媒体 元 素 : 现在 的 网 页 中 的 动态 元 素 可 以 说 是 丰富 多 彩 , 包 括 GIF 动画 、 





Flash 动画 、 滚 动 字 幕 . 悬 停 按 钮 .广告 横幅 、 网 站 计数 器 等 。 这 些 动态 元 素 使 网 页 不 再 是 一 
个 静止 的 画面 ,可 以 说 动态 元 素 赋 了 予 了 网 页 生命 力 , 使 网 页 活 了 起 来 。 网 页 中 的 音频 和 视频 
内 容 还 可 以 丰富 页 面 内容 , 增 加 页 面 信息 量 


1.2 网 页 制作 相关 技术 


本 书 主要 介绍 浏览 器 端 开 发 技术 ,也 就 是 HTML 页 面 制作 技术 。 早 期 的 网 站 功能 比 
较 简单 ,单独 使 用 HTML 就 可 以 实现 前 台 网 页 的 制作 ,而 现在 的 网 站 功能 越 来 越 完善 ,网 
页 的 设计 与 制作 要 符合 Web 标准 。 在 Web 标准 中 ,HTML/XHTML 负责 页 面 结 构 ,CSS 
负责 样式 表现 ,JavaScript 负责 动态 行为 。 











1.2.1 初 识 HTML 


HTML(HyperText Markup Language, 超 文本 标记 语言 ) 是 一 种 用 来 制作 超 文本 文档 
的 简单 标记 语言 。 所 谓 超 文本 ,是 指 用 HTML 创建 可 以 加 入 图 片 .声音 动画、 音频 .视频 
等 内 容 的 文档 ,并 且 可 以 实现 从 一 个 文件 跳 转 到 另 一 个 文件 ,与 世界 各 地 主机 的 文件 连接 。 

查看 源 文件 代码 的 操作 如 下 。 

(1) 打开 IE(Internet Explorer) 浏 览 器 ,在 地 址 栏 输入 网 易 的 网 址 *http://www. 163. com”， 
按 下 Enter 键 后 ,网 易 网 站 的 首页 就 呈现 在 面前 ,如 图 1-2 所 示 。 


加 网 易 - Wicrosoft Internet Explorer I 国 |[=]|E3 
文件 中 编辑 区) 查看 W) 收藏 好) 工具 GD) 帮助 ol) [3 


Osa. 日- 国 国 的 肛交 wax 加 全 -全 加 : 口 网 动 四 全 上 回 
[TREE 国 回 困 
Google CG-bou 国 开始 4 大 下” 安 # 答 - 刚 已 拓 良 忆 个 秒 拼 写 检 查 -| ?7 后 译 -| 四 发 过 至 ” 当 加 广 村 ~ 


注册 通行 证 | 邮箱 用 户 各 密码 网易 通 行 证 加 | 一 录 | 免费 邮 VIP 邮箱 168 财 富 邮 一 卡通 : 充值 中 心 在 贱 购 买 后 
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图 1-2 网 易 网 站 首页 
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(2) 现在 查看 一 下 这 个 精美 网 页 的 源 文件 代码 。 在 IE 浏览 器 窗口 中 ,选择 “查看 ”一 
“ 源 文件 ”命令 ,弹出 一 个 记事 本 文件 ,如 图 1-3 所 示 。 可 以 看 到 网 页 的 源 文件 是 由 一 行 行 代 
码 组 成 的 ,这 些 就 是 HTML 代码 。 


趾 wr- 163[1] 一 记事 本 

文件 到 编辑 到 格式 @) 查看 WD 帮助 0 

ktDOCTYPE htnl PUBLIC ™-//W3C//DTD XHTML 1-9 Transitional//EN" 力 
<htnl xmlns="“http://www-w3-org/19997xhtml” xnl:1lang="zh-CN" 1 
<head> 

<neta epee Sa Type” content="text/htnl; charset=gb; 





<base target: wk 4 
<net. = 中 tent=" 网 性 ， 
i 
neta nane="robots" content="index, Follow” 


《meta nane="googlebot" content™"index, fonor /> 
人 style type="text/css"> 


内 CSS Docunent =*/ 

body { text-align: center; Font-Fanily:" 宋 体 "，arial;nargin:0; 
div, Form,ing,ul,01,1i,d1,dt,dd {nargin: 0; padding: 9; border: 
h1,h2,h3,hy,h5,h6 {《 margin:9; padding:93》 

table,td,tr ,th{font-size:12px;} 


/= 链接 颜色 */ 

a:link 《color: #1f3a87; text-decoration:none;} 
azuisited {color: #83986f;text-decoration:none;》 
a:hover {color: Mee pel text-decoration:underline;》 
azactiue {color: 


1 
/* 颜色 属性 [i “水 海 c 加 颜色 名 称 ] ea/ 


cRed,a.cRed:link,a.cRed:visitedt color:Red; 》 


a 0 





图 1-3 网 页 源 文件 代码 


专家 点 拨 : 用 HTML 编写 的 超 文本 文档 称 为 HTML 文档 , 它 能 在 各 种 操作 系统 平台 
(如 UNIX、Windows 等 ) 上 独立 运行 。 自 1990 年 以 来 HTML 就 一 直 被 用 作 WWW(World 
Wide Web) 的 信息 表示 语言 ,用 于 描述 网 页 的 格式 设计 和 它 与 WWW 上 其 他 网 页 的 链接 信 
息 。 使 用 HTML 语言 描述 的 文件 ,需要 通过 WWW 浏览 器 显示 出 效果 。 


1.2.2 HTML 编辑 工具 


编写 HTML 代码 的 工具 有 很 多 ,本 节 介绍 3 种 最 常用 的 编辑 工具 : 记事 本 、EditPlus 
和 Dreamweaver。 记 事 本 是 一 个 简单 的 文本 编辑 器 ,EditPlus 是 一 个 比较 专业 的 文本 编辑 
器 ,Dreamweaver 是 一 个 所 见 即 所 得 的 网 页 制作 工具 。 

1. 记事 本 

记事 本 是 Windows 操作 系统 自 带 的 一 个 应 用 程序 ,使 用 起 来 十 分 方便 和 简单 。 下 面 通 
过 简单 网 页 实例 介绍 使 用 记事 本 编写 HTML 代码 的 方法 。 

(1) 选择 “开始 ">“ 所 有 程序 >“ 附件” 一 “记事 本 ”命令 ,运行 “记事 本 ”程序 。 在 “记事 
本 ”窗口 中 输入 以 下 代码 。 


<p== 

<html> 

<head> 

<title > 欢迎 光临 图 书 网 站 </title> 
</head> 

<body> 

这 是 第 一 个 简单 网 页 ! 

</body> 

</html > 





(2) 选择 “文件 ”一 “保存 ”命令 ， 
件 名 ”文本 框 中 输入 文件 名 “myweb001. html”, 如 图 1-4 所 示 。 























Jaywebo0l. html 
文本 文档 ff. txt) 

















图 1-4 “另存 为 "对 话 框 


在 弹出 的 “另存 为 "对话 框 中 选择 要 保存 的 路 径 , 在 “ 文 


专家 点 拨 : 在 如 图 1-4 所 示 的 “文件 名 ”文本 框 中 输入 文件 名 时 ,一 定 要 输入 网 页 文件 
的 扩展 名 . html( 或 者 . htm), 这 样 保存 的 文件 才 是 HTML 网 页 文档 。 如 果 这 里 不 输入 


.html( 或 者 . htm) 扩 展 名 ,那么 系统 默认 会 将 文件 保存 为 文本 文件 (TXT 文件 ) 。 


(3) 打开 “资源 管理 器 "窗口 ,根据 刚才 保存 网 页 的 位 置 ,找到 myweb001. html 文件 ,如 





图 1-5 所 示 。 











文件 全 编辑 EE) 查看 WW) 收藏 &) 工具 加 帮助 00 


四 恨 - 上 四 -应 月 处 | 也 xnx| 多国 如 史 
地 址 加 ) | 加 6:\web\purtl 
文件 夹 

国 sp 本 地 磁盘 (E;) 

田 < 本 地 磁 条 F;) 


日 吧 本 地 磁盘 (6:) 
© 36oponlosds 








田 襄 IYD 3 器 0) 


图 1-5 在 “资源 管理 器 "窗口 中 定位 文件 





(4) 双击 myweb001. html 文件 图 
窗口 中 显示 的 网 页 效果 如 图 1-6 所 示 。 


标 ,系统 自动 启动 IE 浏览 器 并 打开 这 个 网 页 文件 ,IE 


网 页 设计 入 门 


第 


击 一 
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当 欢迎 光临 图 书 网 站 - Hicrosoft Internet Ezplorer [- | 加 | 区 | 
文件 人 ) ”编辑 下 ) 查看 WW) 收藏 G) 工具 CD) 帮助 0D 


@ 二 -日 - 国 四 人 @ Pr 南 wax @ 


地 址 @) 机 6: web\partlvwyreb001.htnl 图 # 天 。 斌 注 





这 是 第 一 个 简单 网 页 ! 





2. EditPlus 

EditPlus 是 一 款 功 能 全 面 的 文本 、HTML ,程序 源 代码 编辑 器 。 它 提供 了 更 加 便捷 的 
代码 编辑 功能 ,默认 支持 HTML、 CSS、PHP、ASP、 Perl、C/C++、Java、JavaScript 和 
VBScript 等 语法 高 亮 显 示 ; 提供 了 与 Internet 的 无 缝 连接 ,可 以 在 EditPlus 的 工作 区 域 中 打 
开 Internet 浏览 窗口 ; 提供 了 多 工作 窗口 ,不 用 切换 到 桌面 , 便 可 在 工作 区 域 中 打开 多 个 文档 。 

总 之 ,EditPlus 功能 强大 ,界面 简洁 美观 , 且 启 动 速度 快 ; 中 文 支持 比较 好 ; 支持 语法 高 
亮 ; 支持 代码 折 秋 ; 支持 代码 自动 完成 (但 其 功能 比较 弱 ) ,不 支持 代码 提示 功能 ; 配置 功能 
强大 ,很 适合 初学 者 使 用 。EditPlus 的 工作 窗口 如 图 1-7 所 示 。 


C:\Documents and SettingsVAdainistrator\ 票 面 \partl\lianxi001-htal ... [| 右 | 区 | 
”文件 @) 编辑 人 E) 视图 WW) 搜索 GE) 文档 和 ) 工程 EE) 工具 I) 浏览 器 B) ZCC) 窗口 和 才 助 0D - 











1 <!doctype html> 
2 <htnl lang="en"> 
3 <head> 
日 图 becoments md sd 4 <neta charset="UTF-8"> 
日 国 Adninistrator|| 5 
日 加 桌面 
F <neta nane= 
<neta nane="Description” content=""> 
<title> 一 机 练习 的 第 一 个 简单 网 页 </title> 
</head> 
11 日 <body> 
<p> 欢 迎 访 问 我 的 第 一 个 网 页 ， 希 望 多 提 宝 南 意 见 ! </p> 
</body> 
4 </htnl> 











和 1 Files 人 机) 


| olisnxio0l htnl 总 
需要 帮助 ， 请 按 F1 键 











图 1-7 EditPlus 的 工作 窗口 


3. Dreamweaver 


Dreamweaver 是 一 个 “所 见 即 所 得 ”的 网 页 制作 和 网 站 管理 开发 工具 ,利用 Dreamweaver 
可 以 设计 、 开 发 并 维护 符合 Web 标准 的 网 站 和 应 用 程序 。 无 论 网 站 开发 者 是 喜欢 直接 编写 


HTML 代码 的 驾驭 感 还 是 偏爱 在 可 视 化 编辑 环境 中 了 


的 工具 ,丰富 Web 创作 体验 。 


Dreamweaver CS6 的 工作 窗 

















[ 作 ,Dreamweaver 都 会 提供 帮助 良 多 


如 图 1-8 所 示 。Dreamweaver CS6 是 Adobe 公司 推出 





的 软件 版 本 ,加强 了 对 Web 标准 的 支持 ,使 创建 符合 Web 标准 的 站 点 更 加 容易 。 





Dw Br 六” Br 
文件 ) 编辑 (E) 查看 WD 插入 (0) 修改 (格式 (0) 命 人 站 点 GD) 窗口。 帮助 0D 


Ee 

















打开 最 近 的 项 目 
回 打开 








新 建 
去 HTML 
号 ColFwion 
杰 PHP 
css 

时 Javascript 


村 xML 


网 流 合同 属 布 局 
绩 Dreamweaver 站 点 


二 Buriness Catalyst 站 点 


Bs 














Business Catalyst 创作 








CSS 过 渡 效 果 面板 

















jQuery Moble 包机 





| PhoneGap Buid 面板 
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图 1-8 Dreamweaver CS6 的 工作 窗口 


1.2.3 CSS 和 JavaScript 
在 进行 网 页 设计 与 制作 时 ,为 了 简化 程序 的 开发 ,从 HTMIL4.01 开始 ,HTML 将 “网 页 


的 内 容 结 构 ” 与 “网 页 的 排版 布局 ”分 开 , 即 “内 容 与 表现 形式 相 分 离 ”。 划 














中 ,HTML 标签 主 


要 是 描述 网 页 的 内 容 结构 ; CSS 描述 网 页 的 排版 布局 ; JavaScript 描述 网 页 的 事件 处 理 , 使 


网 页 能 够 具有 交互 性 。 
1. CSS 


CSS(Cascading Style Sheets,“ 层 到 样 式 表 ”或 “级 联 样式 表 ”) 是 一 组 格式 设置 规则 ,用 
于 控制 Web 页 面 的 外 观 。 通 过 使 用 CSS 样式 设置 页 面 的 格式 ,可 将 页 面 的 内 容 与 表现 形 
式 分 离 。 页 面 内 容 存放 在 HTML 文档 中 ,而 用 于 定义 表现 形式 的 CSS 规则 存放 在 另 一 个 
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文件 或 HTML 文档 的 某 一 部 分 中 ,通常 为 文件 头 部 分 。 将 内 容 与 表现 形式 分 离 , 不 仅 可 使 维 
护 站 点 的 外 观 更 加 容易 ,而 且 还 可 以 使 HTML 文档 代码 更 加 简练 ,缩短 浏览 器 的 加 载 时 间 。 

CSS 是 W3C(World Wide Web Consortium) 定 义 和 维 护 的 标准 ,是 一 种 用 来 为 结构 化 
文档 (如 HTML 文档 或 XML 应 用 ) 添 加 样式 (字体 、 间 距 和 颜色 等 ) 的 计算 机 语言 。 它 可 以 
使 网 页 制作 者 的 工作 更 加 轻松 和 灵活 ,现在 越 来 越 多 的 网 站 采用 了 CSS 技术 。 

由 于 允许 同时 控制 多 重 页 面 的 样式 和 布局 ,CSS 可 以 称 得 上 Web 设计 领域 的 一 个 突 
破 。 网 页 设计 者 能 够 为 每 个 HTML 元 素 定义 样式 ,并 将 某 应 用 于 希望 的 任意 多 的 页 面 中 。 
如 果 需 进行 全 局 的 更 新 ,只 需 简单 地 改变 样式 ,然后 网 站 中 的 所 有 元 素 均 会 自动 地 更 新 。 

2. JavaScript 

JavaScript 是 目前 在 网 页 中 广泛 使 用 的 脚本 语言 , 它 是 Netscape 公司 利用 Java 的 程序 
概念 ,将 自己 原 有 的 LiveScript 重新 进行 设计 后 而 产生 的 脚本 语言 。 

JavaScript 是 一 种 基于 对 象 和 事件 驱动 并 具有 安全 性 能 的 脚本 语言 ,有 了 JavaScript， 
可 使 网 页 变 得 生动 .活泼 。 使 用 它 的 目的 是 与 HTML、Java 小 程序 (Java Applet) 一 起 实现 
在 一 个 网 页 中 链接 多 个 对 象 ,与 网 络 客户 进行 交互 ,从 而 可 以 开发 客户 端的 应 用 程序 。 

一 个 JavaScript 程序 其 实 是 一 个 代码 文档 , 它 需 要 授信 或 者 调和 人 到 HTML 文档 中 进行 
使 用 。 任 何 可 以 编写 HTML 代码 的 软件 都 可 以 用 来 编写 JavaScript 程序 。 





1.3 HTML 入 门 


HTML 是 编写 Web 应 用 程序 的 基本 语言 。 本 节 学 习 HTML 的 基础 知识 ,包括 
HTML 文档 的 结构 .HTML 的 基本 语法 等 。 


1.3.1 HTML 文档 的 结构 


HTML 文件 是 标准 的 ASCII(American Standard Code for Information Interchange, 美 
国信 息 互 换 标准 代码 ) 文 件 , 它 是 添加 了 被 称 为 标记 (Tag) 的 特殊 字符 串 的 普通 文本 文件 。 
一 个 完整 的 HTML 文档 包含 头 部 和 主体 两 个 部 分 的 内 容 。 在 头 部 内 容 中 ,可 以 定义 标题 、 
样式 等 ,主体 内 容 就 是 网 页 要 显示 的 各 种 信息 ,HTML 文档 的 结构 如 下 。 








<html > 
<head> 
头 部 内 容 , 定 义 标题 .样式 等 
</head > 
<body> 
主体 内 容 , 网 页 要 显示 的 各 种 信息 ,包括 文本 ` 超 链接 .图像 .动画 等 
</body > 
</html > 


其 中 < html > 标记 在 最 外 层 , 表 示 这 对 标记 之 间 的 内 容 是 HTML 文档 。 一 些 HTML 
文档 省 略 了 < html > 标记 ,因为 扩展 名 为 . html 或 . htm 的 文件 被 Web 浏览 器 默认 为 是 
HTML 文档 。< head > 与 </head > 之 间 包 括 文档 的 头 部 内 容 , 如 文档 的 标题 .样式 等 , 若 不 
需 头 部 信息 则 可 省 略 此 标记 。< body > 标记 一 般 不 省 略 ,表示 主体 内 容 的 开始 。 


1. 头 部 内 容 

HTML 头 部 内 容 中 包含 关于 所 在 网 页 的 信息 。 头 部 内 容 中 的 信息 ,主要 是 被 浏览 器 所 
用 ,不 会 显示 在 网 页 的 正文 内 容 中 。 

标题 是 最 常用 的 头 部 信息 , 它 不 是 显示 在 网 页 的 正文 内 容 中 ,而 是 显示 在 浏览 器 的 标题 
栏 中 。 用 < title > 标记 指定 网 页 标题 ,点 明 网 页 的 主题 ,让 浏览 者 决定 是 否 继续 浏览 , 即 在 
< title >…</title > 之 间 输 入 网 页 标题 ,如 程序 1-2 所 示 。 





< -=- 程序 1-2 --> 
<html > 
<head> 
<title> 专 业 的 图 书 网 站 </title> 
</head> 
<body> 
</body> 
</html > 





在 浏览 器 中 打开 这 个 网 页 文档 ,显示 效果 如 图 1-9 所 示 。 浏 览 器 窗口 的 标题 栏 中 窗口 
的 标题 已 经 换 为 "专业 的 图 书 网 站 ”。 


当 专业 的 图 书 网 站 - Hicrosoft Internet Explorer [C | 右 | 区 ] 
文件 时) ”编辑 FE) 查看 YY) 收 若 人 ) 工具 XI) 帮助 0D 了 
a- © 国 国 作 Pe mr @ 


地 址 加 ) | 稻 6:\web\partl\ 程 序 1-2.htnl 回回 到 is 








图 1-9 页 面 标题 示例 


另外 ,在 头 部 内 容 中 用 < meta > 标记 描述 网 页 的 有 关 信 息 , 如 开发 工具 、 作 者 、 网 页 关键 
字 、 网 页 描述 等 。 这 些 信 息 并 不 在 网 页 正文 内 容 中 显示 ,但 是 一 些 搜索 引擎 可 以 检索 这 些 信 
息 ,浏览 者 可 以 根据 这 些 关 键 字 或 描述 查找 到 该 网 页 。 程 序 1-3 是 一 个 < meta > 标记 的 实例 。 


a Ee 2 

<html> 

<head> 
<meta name = "keywords" content = "图 书 ,教材 ,教程 ,出 版 社 "/> 
<meta name = "description" content = "这 是 一 个 包含 大 量 图 书信 息 的 网 站 " /> 
<meta name = "author" content = "miaoliang" /> 
<title> 专 业 的 图 书 网 站 </title> 

</head> 

<body> 

</body> 

</html > 
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下 面 结合 上 面 的 程序 段 ,介绍 < meta > 标记 的 几 个 重要 属性 。 
(1) 指定 网 页 字符 集 。 启 动 Dreamweaver CS6 ,新建 一 个 网 页 文件 ,在 代码 视图 中 
<head > 下 面 有 一 行 代码 : 


<meta http - equiv = "Content — Type" content = "text/html; charset= utf 一 8" /> 


其 中 “charset 二 utf-8” 表 示 当 前 网 页 使 用 的 字符 集 是 utf-8,utf-8 是 一 种 针对 Unicode 

的 可 变 长 度 字符 编码 ,也 是 一 种 前 组 码 ,又 称 万 国 码 。 如 果 想 要 使 用 中 文 编码 ,可 以 执行 “ 编 

”~ 一“ 首选 参数 "命令 ,打开 * 首 选 参数 "对 话 框 ,在 “默认 编码 ”下 拉 列 表 中 选择 “简体 中 文 
(GB2312)” 选 项 ,以 后 新 建 的 网 页 字符 集 就 是 简体 中 文 了 ,如 图 1-10 所 示 。 


默认 文档 的 |xTwL 


默认 扩展 名 到 ): [htnl 


默认 文档 类 型 00TD) :|XHTWL 1.0 Transitional 





默认 编码 @): |Unicede QWTF-8) 


中 欧 (D0S) 
la 
Unicode 标准 化 表单 下) indows 
广 Windows) 
来 六 DOS) 
伯 来 文 [SO-Vi sual) 
伯 来 文 CS0- 还 辑 ) 
来 广 findows) 
文 Gso) 

















图 1-10 “首选 参数 "对 话 框 








(2) 指定 网 页 的 关键 字 。 搜 索引 擎 会 自动 读 取 < meta > 标签 中 的 关键 字 内 容 , 将 其 信息 
加 入 到 数据 库 中 。 例 如 ,程序 1-3 中 : 








<meta name = "keywords" content = "图 书 ,教材 ,教程 ,出 版 社 "/> 





即 是 利用 name 属性 的 取 值 为 “keywords”, 表 示 关 键 字 ,“content” 后 面 是 具体 关键 字 的 内 
容 , 每 个 关键 字 间 要 用 逗号 间隔 。 

(3) 指定 页 面 说 明 。 搜 索引 擎 会 搜索 关于 页 面 的 内 容 信息 ,利用 < meta > 标记 的 name 
属性 取 值 为 “description”. 即 可 实现 。 





<meta name = "description" content = "这 是 一 个 包含 大 量 图 书信 息 的 网 站 " /> 


(4) 作者 信息 。 标 明 网 页 的 作者 。 


< meta name = "author" content = "miaoliang"/> 


除了 < title > 和 < meta > 标记 外 ,网 页 的 头 部 内 容 还 有 < script >、< link >、< style > 等 标 
记 。< script > 标记 用 来 设 定 页 面 中 程序 脚本 的 内 容 ; < link > 标记 用 来 建立 和 外 部 文件 的 链 
接 ,常用 的 是 对 CSS 外 部 样式 表 文 件 的 链接 ; < style > 标记 用 来 设 定 CSS 样式 表 的 内 容 。 

2. 主体 内 容 
主体 内 容 是 网 页 呈现 给 浏览 器 者 的 信息 ,是 网 页 的 中 心 和 重心 所 在 。 主 体内 容 放 在 标 
记 < body >…</body > 之 间 , 包 括 文字 图片. 动画、 视频 表格、 表单、 超级 链接 等 元 素 。 

例如 ,程序 1-4 在 < body >…</body > 之 间 添 加 了 几 个 关于 文本 和 段落 的 标记 。 











<! -- 程序 1-4 --> 
<html > 
<head> 
<title> 专 业 的 图 书 网 站 </title> 
</head> 
<body> 
<h2 > 最 新 教材 公告 </h2 > 
<p > 清华 大 学 出 版 社 出 版 发 行 了 一 套 经 典 教材 。</p> 
</body> 
</html > 





程序 1-4 中 的 标记 < h2 > 可 以 将 文字 定义 成 二 级 标题 , < p > 是 段落 标记 。 
由 于 < body > 标签 可 以 设置 网 页 的 全 局 效果 ,因此 可 以 利用 以 下 代码 设置 网 页 的 背景 
色 ,背景 图 片 ,文字 颜色 ,超级 链接 颜色 及 页 面 边 距 等 。 


<! -- 程序 1-5 --> 
< html > 
<head> 

<title> body 标签 整体 效果 介绍 </title> tt 
</head> 视频 讲解 
< body bgcolor = " #00FF33" background = "12. jpg" text =" 间 FF0000" link=" 间 0000FF" leftmargin= 
"0 
</body> 
</html> 





在 程序 1-5 中 ,通过 < body > 标签 的 设置 ,依次 设置 了 整个 页 面 的 背景 颜色 .背景 图 片 、 
文字 颜色 ,超级 链接 颜色 及 左 侧 页 边 距 。 

由 于 “内 容 与 表现 形式 相 分 离 ” 的 特点 ,在 学 习 了 CSS 知识 后 ,可 以 替代 < body > 的 相关 
属性 。 


1.3.2 <!DOCTYPE > 标记 


DOCTYPE 是 Document Type( 文 档 类 型 ) 的 简写 ,在 页 面 中 ,用 来 指定 页 面 所 使 用 的 
XHTML( 或 者 HTML) 的 版 本 , 即 是 DTD( 文 档 类 型 声明 )。 要 想 制作 符合 标准 的 页 面 ,一 
个 必 不 可 少 的 关键 组 成 部 分 就 是 DOCTYPE 声明 。 只 有 确定 了 一 个 正确 的 DOCTYPE， 
XHTML 中 的 标识 和 CSS 才能 正常 生效 。 

HTML5 的 DOCTYPE 声明 添加 在 HTML 文档 的 首 行 ,下 面 是 一 个 示例 。 
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<! DOCTYPE html > 
<html> 
</html > 


HTML5 简化 了 很 多 细微 的 语法 ,DOCTYPE 声明 ,只 需要 加 入 <!DOCTYPE html > 
标记 即 可 。<! doctype html > 也 是 正确 的 ,因为 HTML5 语法 是 不 区 分 大 小 写 的 。 


1.4 _ HTMLS 基本 语法 


HTML 文档 是 在 普通 文件 中 的 文本 上 加 上 标记 (或 者 称 标签 ) ,使 其 达到 预期 的 显示 效 
果 。 当 浏览 器 打开 一 个 HTML 文档 时 ,会 根据 标记 的 含义 显示 HTML 文档 中 的 内 容 。 
1.4.1 标记 语法 

HTML 用 于 描述 功能 的 符号 称 为 标记 。 前 面 介绍 的 < html>、< head > < body><p> 
等 都 是 标记 。 标 记 通 常 分 为 双 标 记 和 单 标记 两 种 类 型 。 

1. 双 标 记 

双 标 记 由 开始 标记 和 结束 标记 两 部 分 构成 , 它 必 须 成 对 使 用 。 开 始 标记 告诉 浏览 器 从 
此 处 开始 执行 该 标记 所 表示 的 功能 ,结束 标记 告诉 浏览 器 在 这 里 结束 该 标记 。 

双 标 记 的 基本 语法 是 : 


< 标记 名 称 > 内 容 </ 标 记名 称 > 


例如 ,< hl > 网 站 简介 </hl >, 其 作用 就 是 将 “网 站 简介 ”这 段 文本 按 < hl > 标记 规定 的 
功能 来 显示 , 即 以 一 级 标题 来 显示 ,而 < hl > 和 </hl > 之 外 的 文本 不 受 这 组 标记 的 影响 。 

2. 单 标记 

单 标记 是 指标 记 单 独 出 现 ,只 有 开始 标记 而 没有 结束 标记 。 这 种 标记 单独 使 用 就 可 以 

单 标记 的 基本 语法 是 : 


< 标记 名 称 > 
例如 ,< br > 就 是 一 个 最 常用 的 单 标记 , 它 表示 换行 。 


1.4.2 属性 语法 


HTML 可 以 为 某 些 标记 附件 一 些 信息 ,这 些 附件 信息 被 称 为 属性 (Attribute)。 通 过 属 
性 可 以 设置 HTML 元 素 更 丰富 的 信息 。 属 性 是 在 双 标记 开始 标记 或 单 标记 标记 名 称 后 设 
定 , 它 以 * 属 性 名 称 =" 属 性 值 "的 形式 出 现 . 如 name 二 "value"。 
属性 的 基本 语法 是 : 











< 标记 名 称 属性 名 1= "属性 值 ”属性 名 2 = "属性 值 "> 


属性 应 该 添加 在 开始 标记 中 ,并且 和 标记 名 称 之 间 有 一 个 空格 分 隔 。 一 个 标记 可 以 包 
含 多 个 属性 ,各 属性 之 间 无 先后 次 序 ,用 空格 分 开 。 例 如 : 














< body background= "back_ground. gif" text = "red"> 大 家 好 !</body> 


这 是 一 个 < body > 标记 ,其 中 background 属性 用 来 表示 HTML 文档 的 背景 图 片 ,text 
属性 用 来 表示 文本 的 颜色 。 
1.4.3 注释 标记 

注释 标记 用 于 在 HTML 文档 中 插入 注释 。 注 释 内 容 并 不 会 在 浏览 器 中 显示 , 它 会 被 
浏览 器 忽略 。 可 以 使 用 注释 对 程序 代码 进行 解释 ,适当 的 注释 对 以 后 代码 的 阅读 和 维护 会 


有 很 多 帮助 。 
注释 标记 的 基本 语法 是 : 





<! -- 注释 内 容 一 > 
左 括号 后 需要 输入 一 个 感叹 号 , 右 括 号 前 就 不 需要 输入 了 。 例 如 : 


<! -- 这 是 一 段 注释 。 注 释 不 会 在 浏览 器 中 显示 。--> 
<p> 这 是 一 段 普通 的 段落 。</p> 


另外 一 个 好 的 习惯 是 把 样式 元 素 放 入 注释 文本 中 ,这 样 就 可 以 避免 不 支持 样式 的 浏览 
器 把 它 显示 为 纯 文本 ,影响 网 页 的 美观 。 例 如 : 


<body> 


< script type = "text/javascript"> 
<! -- 
document. write( "欢迎 访问 本 站 !") 
一 > 
</script> 
<noscript > 您 的 浏览 器 不 支持 JavaScript!</noscript> 


</body> 


专家 点 拨 : 使 用 HTML5 注释 加 入 条 件 , 就 可 以 让 IE 浏览 器 根据 注释 内 容 进 行 条 件 
判断 ,而 其 他 浏览 器 则 只 会 当 作 普通 的 HTML 注释 处 理 。 相 关内 容 , 读 者 可 查阅 相关 
资料 。 

HTML5 新 增 如 下 几 个 注释 标签 。 

(1) < ruby > 标记 定义 注释 或 音标 。 

(2) < rp > 告诉 那些 不 支持 ruby 元 素 的 浏览 器 如 何 去 显 示 。 

(3) < rt > 标记 定义 对 ruby 的 注释 内 容 文本 。 第 
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1. S 


上 机 练习 与 指导 


1.5.1 编写 一 个 简单 的 HTML 网 页 


用 记事 本 程序 创建 一 个 HTML 





文档 ,网 页 效果 如 图 1-11 所 示 。 其 中 页 面 标题 为 “个 人 


主页 ”。 程 序 要 设置 DOCTYPE 声明 ,类 型 为 过 渡 型 。 


<! DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Transitional//EN" 
"http://waw. w3. org/TR/xhtml1/DTD/xhtml1 - transitional. dtd"> 


<! -- 上 机 练习 1-1 --> 
<html > 
<head > 
<title> 个 人 主页 </title> 
</head> 
<body > 


<p> 欢 迎 访问 我 的 个 人 主页 !</p> 
< img src="../images/home. png"> 


</body> 
</html > 


加 个 人 主页 - 了 icrosoft Internet Explorer 


文件 四 ”编辑 于) 查看 W) 收藏 和 A) 工具 CD) 帮助 0 


@a-©- 国 


BO Pr 次 eax © | PB- 


地 址 四) | 得 ] 6:\web\parti\ 上 机 终 习 1-1. htnl 


欢迎 访问 我 的 个 人 主页 ! 





1.5.2 <meta> 标 记 的 应 用 





图 1-11 网 页 效果 


本 节 的 练习 主要 是 让 读者 掌握 元 信息 标记 < meta > 的 使 用 方法 。 元 信息 标记 < meta > 
位 于 HTML 文件 的 < head >…</head > 标记 中 ,用 来 记录 网 页 关键 字 、 描 述 、 刷 新 等 信息 ,不 





会 显示 在 HTML 页 面 中 .但 却 起 着 对 





要 的 作用 。 例 如 ,加 入 关键 字 会 使 网 页 自动 被 大 型 搜 


索 网 站 自动 搜集 ,可 以 设 定 页 面 格式 及 刷新 等 。 读 者 可 以 结合 1. 3. 1 节 的 内 容 进行 大 量 


练习 。 


1.6 本 章 习 题 


一 、 选 择 题 
1. 不 同 的 网 页 虽然 内 容 千 差 万 别 , 但 是 万 变 不 离 其 宗 , 所 有 的 网 页 都 是 由 网 页 基本 元 
素 组 成 的 。 其 中 ( ) 是 实现 网 页 按照 一 定 逻 辑 关 系 进行 跳 转 的 元 素 。 





A 水 平 线 B， 超 链接 C. 表格 D. 动画 
2. HTML 网 页 文件 的 默认 扩展 名 是 ( Ns 
Nt B. .doc C. .html D. .exe 
3. 以 下 HTML 标记 中 ,( ) 是 网 页 的 主体 。 
A. <head ></head > B. < title ></title > 
C. <body ></body > D. < table ></table > 
4. 以 下 标记 中 ,( ) 是 用 于 设置 页 面 标题 的 标记 。 
A. <title> B. < caption > C. < head > D. < html > 
5. 以 下 标记 中 ,( ) 是 用 于 设置 页 面 元 信息 的 标记 。 
A. < caption > B. < head > C. < title> D. < meta> 
二 、 填空 题 
1, 是 一 个 单独 的 网 页 ,和 一 般 网 页 一 样 ,可 以 存放 各 种 信息 ,同时 又 是 一 个 特 
殊 的 网 页 ,作为 整个 网 站 的 起 始点 和 汇总 点 ,是 浏览 者 访问 网 站 的 第 一 个 网 页 。 
2. 要 想 制作 符合 标准 的 页 面 , 一 个 必 不 可 少 的 关键 组 成 部 分 就 是 声明 。 声 明 
的 类 型 包括 3 种 : 严格 型 、 和 框架 型 。 
3. HTML 用 于 描述 功能 的 符号 称 为 标记 ,标记 通常 分 为 和 两 种 
类 型 。 
4，HTML 可 以 为 某 些 标记 附件 一 些 信息 ,这 些 附件 信息 被 称 为 属性 。 属 性 应 该 添加 
在 开始 标记 中 ,并 且 和 标记 名 称 之 间 有 一 个 分 隔 。 
5. 搜索 引擎 会 搜索 关于 页 面 的 内 容 信息 ,利用 标记 的 属性 取 值 为 








“description”, 即 可 实现 。 


网 页 设计 入 门 





第 2 章 制作 网 页 内 容 


文字 和 图 片 是 网 页 中 最 基本 的 元 素 , 制 作 网 页 时 要 对 它们 进行 适当 的 编排 ,包括 文字 格 
式 . 段 落 格式 .图 文 混 排 等 。 另 外 ,一 些 常见 的 多 媒体 文件 也 是 网 页 中 的 重要 元 素 , 包 括 动 
画 、 声 音 和 视频 等 ,它们 可 以 使 网 页 的 内 容 更 加 丰富 多 彩 。 

本 章 主要 内 容 如 下 。 

“文学 5 

。 有 段落。 

。 列表 。 

”图 片 。 
。 其 他 多 媒体 文件 。 





























2.1 文 字 


文字 是 网 页 中 最 基础 的 信息 载体 ,浏览 者 主要 通过 文字 了 解 网 页 的 内 容 。 虽 然 利用 图 
形 文字 也 可 以 达到 同样 的 效果 ,甚至 超出 纯 文本 的 效果 ,但 是 网 页 文字 的 优势 还 是 无 法 被 取 
代 的 。 因 为 纯 文本 所 占用 的 存储 空间 非常 小 ,浏览 纯 文 本 网 页 时 ,占用 的 网 络 带宽 较 少 ,能 
快速 地 被 用 户 打开 。 


2.1.1 添加 文字 





在 HTML 文件 中 添加 文字 的 方法 很 简单 ,在 需要 文字 的 地 方 直接 输入 即 可 ,但 是 需要 
添加 在 < body > 与 </body > 标记 之 间 。 
【 例 2-1】 一 个 在 网 页 中 添加 文字 的 实例 。 


<! -- 程序 2-1 --> 
< html > 
< head> 
<title> 添 加 文字 </title> 
</head> 
<body> 
这 是 一 个 专业 的 图 书 网 站 ! 
</body> 
</html > 





上 述 程序 中 ,在 < body > 与 </body > 标记 之 间 输 入 了 一 段 文字 ,网 页 效果 如 图 2-1 所 示 。 


要 添加 文字 - 了 crosoft Internet Explorer 臣 | 癌 | 区 | 
文件 中” 编辑) 查看 吸收 蕊 @Q) 工具 帮助 :” 廊 


@=-©-OO Pe we 





和 狠 6.\web\part2\ 程 序 2-1_htnl 问 | 加 车 到 府 短 


这 是 一 个 专业 的 | 











图 2-1 添加 文字 的 网 页 效果 


2.1.2 添加 宝 格 和 特殊 符号 


1. 添加 空格 

通常 情况 下 ,HTML 会 自动 删除 文字 内 容 中 的 多 余 空格 ,不 管 文字 中 有 多 少 空格 (通过 
按键 盘 上 的 空格 键 添 加 的 ), 都 视 作 一 个 空格 。 例 如 ,两 个 文字 之 间 添 加 了 8 个 空格 ， 
HTML 会 自动 截取 7 个 空格 ,只 保留 一 个 。 为 了 在 网 页 中 增加 空格 ,可 以 明确 使 用 
“&.nbsp; "表示 空格 。 添 加 一 个 空格 使 用 一 个 “&nbsp; ”表示 ,添加 多 个 空格 就 使 用 多 个 
“&nbsp; "表示 。 利 用 这 种 方法 添加 的 空格 属于 半角 空格 。 也 可 以 通过 全 角 输 入 法 直接 输 
入 全 角 空 格 。 

【 例 2-2】 一 个 在 网 页 中 添加 半角 空格 的 实例 。 


<! -- 程序 2-2 --> 
<html > 
<head> 
<title> 添 加 空格 </title> 
</head> 
<body> 
这 是 一 个 &nbsp; gnbsp; 专 业 的 snbsp; gnbsp; 图 书 网 站 ! 
</body> 
</html > 





上 述 程序 中 ,在 文字 中 间 添 加 了 一 些 空格 ,网 页 效果 如 图 2-2 所 示 。 

2. 添加 特殊 符号 

在 制作 网 页 时 经 常会 应 用 一 些 特殊 字符 ,如 版 权 符号 、 注 册 商 标 符号 等 ,这 些 特殊 符号 
的 添加 方法 也 和 添加 空格 一 样 ,在 需要 添加 特殊 符号 的 地 方 添加 相应 的 符号 代码 即 可 。 

常用 特殊 符号 及 其 对 应 的 符号 代码 如 表 2-1 所 示 。 
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当 添 加 空格 - Hicrosoft Internet Explorer 亿 | 癌 | 区 | 
文件 编辑 EE) 查看 轨 ” 收 着 内 工具 C)， 帮助 :” 雇 


四 证 -四 国 国 入 Pe ex 


地 址 四 ) | 罩 c: \web\part2\ 程 序 2-2.htnl 司 图 半天 特攻 


这 是 一 个 专业 的 图 书 网 站 ! 








图 2-2 添加 空格 的 网 页 效果 


表 2-1 常用 特殊 符号 及 其 对 应 的 符号 代码 





特殊 符号 符号 代码 说 明 
&. &.amp; 连接 符 
© Rcopy; 版 权 所 有 
® Rreg; 注册 
™ &.trade; 商标 
§ Rsects 小 节 
€ &.euro; 欧元 
= &.plusmn; 加 减 符号 
必 &.times; 乘法 符号 
二 &divide; 除法 符号 
， & middot; 中 间 点 
< &lt; 小 于 符号 
> Bgt; 大 于 符号 
党 Ryen; 人 民 币 符号 
° & deg; 度 
中 &. pound; 磅 


【 例 2-3】〗 一 个 在 网 页 中 添加 特殊 符号 的 实例 。 


Si=< 程序 :2 二 3 二 > 

< html > 

<head> 

<title> 添 加 特殊 符号 </title> 

</head> 

<body> 

scopy; 版权 所 有 课件 吧 

</body> 

</html > 





在 上 述 程序 中 添加 了 一 个 版 权 符 号 ,网 页 效果 如 图 2-3 所 示 。 





ES - Hicrosoft Internet Ezplorer 亿 ] 癌 | 区 | 
文件 EF) 编辑 EE) 查看 @) 。 收 章 弛 工具 加 ) 帮助 局 
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@ 版 权 所 有 课件 吧 








图 2-3 添加 版 权 符 号 的 网 页 效果 


2.1.3 文字 样式 


在 网 页 中 添加 文字 后 ,可 以 设置 文字 的 样式 ,包括 字体 、 字 号 、 颜 色 等 。 在 HTML5 中 ， 
这 些 功能 可 以 通过 CSS 实现 ,但 鉴于 兼容 性 ,本 节 简 要 介绍 利用 < font > 标记 或 者 < basefont > 
标记 实现 文字 样式 的 设置 。 

1. < font> 标 记 (HTML5 已 停 用 ) 

设置 文字 样式 的 基本 标记 是 < font ></font >, 被 其 包含 的 文本 为 样式 作用 区 。 

基本 语法 


< font face = "font_name"” size = "value" color = "value">…</font > 


语法 解释 : 

(1) < font > 标记 的 face 属性 用 于 设置 文字 字体 ( 字 型 )。HTML 网 页 中 显示 的 字 型 从 
浏览 端的 系统 中 调用 ,所 以 为 了 保持 字 型 一 致 ,建议 采用 宋体 ,HTML 页 面 默认 采用 宋体 。 
可 以 给 face 属性 一 次 定义 多 个 字体 ,字体 之 间 用 逗号 分 隔 开 ,浏览 器 在 读 取 字 体 时 ,如 果 第 
一 种 字体 系统 中 不 存在 ,就 显示 第 二 种 字体 ,如 果 第 二 种 字体 系统 不 存在 ,就 显示 第 三 种 字 
体 , 以 此 类 推 , 如 果 这 些 字体 都 不 存在 ,就 显示 为 计算 机 系统 的 默认 字体 。 

(2) size 属性 用 于 设置 文字 大 小 。size 的 值 为 1 一 7 ,默认 为 3。 可 以 在 size 属性 值 之 前 
加 上 十 、 一 字符 ,来 指定 相对 于 字号 初始 值 的 增 量 或 减 量 。 

(3) color 属性 用 于 设置 文字 颜色 ,其 值 为 该 颜色 的 英文 单词 或 十 六 进 制 数值 。 

【 例 2-4】 一 个 设置 文字 样式 的 实例 。 


<!-- 程序 2-4 --> 

<html> 

<head> 

<title> 设 置 文字 样式 </title> 

</head> 

<body> 

< font face= "黑体 ”size = "5" color = "red"> 这 是 一 个 专业 的 图 书 网 站 !</font > 
</body> 

</html> 
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上 述 程序 中 用 < font > 标记 定义 了 文字 的 样式 ,文字 字体 为 黑体 ,字号 为 5 号 ,颜色 为 红 
色 。 网 页 效果 如 图 2-4 所 示 。 
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这 是 一 个 专业 的 图 书 网 站 ! 





2-4 设置 文字 样式 的 网 页 效果 
2. < basefont > 标记 CHTMLS 已 停 用 ) 


< basefont > 是 基底 文字 标记 。 在 制作 网 页 前 ,可 以 使 用 < basefont > 标记 对 整个 网 页 文 


字 进 行 一 个 基本 的 定义 ,主要 包括 字体 .字号 和 颜色 , 当 网 页 中 没有 另外 定义 文字 样式 时 ,就 
自动 套用 < basefont > 标记 定义 的 样式 。 


基本 语法 


<basefont face = "font_name" size= "value" color = "value">…</font> 


语法 解释 : 

< basefont > 标记 的 3 个 属性 和 < font > 标记 一 样 。 

专家 点 拨 : < basefont > 标记 要 慎 用 ,因为 它 属于 未 来 Web 标准 不 被 支持 的 标记 
2.1.4 文字 修饰 


HTML 提供 了 一 些 修 饰 文字 效果 的 标记 ,包括 粗 体 、 斜 体 、 下 夯 线 、 删 除 线 、 上 标 和 下 
标 等 。 


1. 粗 体 

为 了 使 文字 更 醒目 ,可 以 使 用 < b > 标记 将 文字 加 粗 显 示 。 
基本 语法 

<b>…</b> 

语法 解释 : 

使 被 作用 的 文字 加 粗 显示 。 


专家 点 拨 : < b> 代表 内 联 文 本 ,通常 是 粗 体 ,没有 传递 表示 重要 的 意思 。HTML5 建议 


使 用 < strong > 标记 ,< strong ></strong > 被 称 为 特别 强调 标记 ,也 是 使 文字 加 粗 , 表 示 重 要 
性 而 不 是 强调 符号 。 


2. 斜体 
如 果 想 使 文字 倾斜 显示 ,可 以 使 用 < i> 标 记 。 
基本 语法 : 


<i>"</i> 


语法 解释 : 


使 被 作用 的 文字 倾斜 显示 。 代 表 内 联 文本 ,通常 是 斜体 ,没有 传递 表示 重要 的 意思 。 


【 例 2-5】 一 个 文字 加 粗 和 斜体 的 实例 。 


<! -- 程序 2-5 --> 
<html > 
<head> 
<title> 文 字 加 粗 和 斜体 </title> 
</head> 
< body> 
<b> 这 是 一 个 专业 的 图 书 网 站 !</b><br> 
<i> 这 是 一 个 专业 的 图 书 网 站 !</i> 
</body> 
</html > 





上 述 程序 中 分 别 对 两 行文 字 进 行 了 加 粗 和 和 斜体 的 修饰 ,网 页 效果 如 图 2-5 所 示 。 





这 是 一 个 专业 的 图 书 网 站 1 
以 起 一 个 地 寻 胸 图 属 网 时 1 





图 2-5 加 粗 和 斜体 的 修饰 网 页 效果 


3. 上 标 和 下 标 





如 果 在 网 页 中 添加 数学 公式 ,有 可 能 遇 到 输入 上 标 和 下 标的 问题 ,如 a 、bs 等 。 


基本 语法 : 


< sup >…</sup > 
< sub >…</sub > 


语法 解释 : 
将 文字 放 在 < sup > 与 </sup > 之 间 就 可 以 实现 上 标 。 
将 文字 放 在 < sub > 与 </sub > 之 间 就 可 以 实现 下 标 。 
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【 例 2-6】 一 个 输入 上 标 和 下 标的 实例 。 


< == 程序 2-6 =-> 
<html> 
<head> 

<title> 文 字 的 上 标 和 下 标 </title> rw 
</head> 视频 讲解 
<body> 

方程 式 x< sup>2 </sup>- 3x+2 的 解 有 两 个 : x<sub>1</sub>=2; x<sub>2</sub>=1 
</body> 
</html > 





上 述 程 序 中 用 < sup > 标记 显示 数学 表达 式 中 的 上 标 , 用 < sub > 标记 显示 数学 表达 式 中 
的 下 标 , 网 页 效果 如 图 2-6 所 示 。 
E 文字 的 上 标 和 下 标 - 了 icrosoft Internet Explorer 
文件 下) 编辑 于 ) 查看 WD 收藏 @) 工具 CD) 帮助 0 
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方程 式 z2-3x+2 的 解 有 两 个 ,zj=2， =1 








图 2-6 文字 的 上 标 和 下 标 网 页 效果 


2.2 段 落 
在 网 页 设计 时 ,文字 段落 制作 的 层次 分 明 , 才 能 让 浏览 者 更 好 地 阅读 ,也 使 得 网 页 看 起 
来 整洁 、 美 观 。 
2.2.1 段落 标记 


在 文本 编辑 器 中 按 下 Enter 键 可 以 创建 一 个 新 的 段落 ,但 是 这 会 被 HTML 忽略 。 因 
此 ,要 在 网 页 中 开始 一 个 新 的 段落 需要 通过 使 用 < p > 标记 来 实现 。 
基本 语法 : 





< p>…</p> 


语法 解释 : 
在 <p > 与 </p > 标记 之 间 的 文字 是 属于 一 个 段落 。 段 落 与 段落 之 间 有 一 定 的 间距 。 


【 例 2-7】 一 个 段落 实例 。 


起 == 程序 2=7==> 
<htm]l > 
<head> 
<title> 段 落 </title> 
</head> 
< body> 
<p > 段落 标记 的 应 用 </p> 





<p> 在 网 页 设计 时 ,文字 段落 制作 的 层次 分 明 ,才能 让 浏览 者 更 好 地 阅读 。 也 使 得 网 页 看 起 来 整 


洁 、 美 观 。</p> 


<p> 在 文本 编辑 器 中 按 下 回 车 键 可 以 创建 一 个 新 的 段落 ,但 是 这 会 被 HIML 忽略 。 因 此 ,要 在 网 


页 中 开始 一 个 新 的 段落 需要 通过 使 用 段落 标记 来 实现 。</p> 
</body> 
</html > 


序 中 ,用 < p > 标记 定义 了 3 个 不 同 的 段落 。 网 页 效果 如 图 2-7 所 示 。 


恒 段 落 - Wicrosoft Internet Explorer 
文件 中 编辑 下 ) 查看 YW) 收藏) 工具 CD) 帮助 人 0 
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段落 标记 的 应 用 
在 网 页 设计 时 ， 交 定 民营 制作 的 层次 分 肖 ， 才能 让 浏览 者 更 


好 地 阅读 。 也 使 得 网 册 看 起 来 整洁 、 美 观 


在 文本 编辑 器 中 按 下 回 车 键 可 以 创建 一 个 新 的 段落 ， 但 是 这 
会 被 HTML 和 忽略 。 因 此 ， 要 在 网 页 中 开始 一 个 新 的 段落 需要 通 
过 使 用 段落 标记 来 实现 。 








图 2-7 段落 的 网 页 效果 


2.2.2 换行 标记 





HTML 的 段落 与 段落 之 间 有 一 定 的 空 隔 。 如 果 不 硕 望 出 现 空 隔 而 只 想 换行 ,就 要 用 到 


一 个 标记 , 即 < br/> 标 记 。< br/> 标 记 可 以 使 所 在 的 位 置 出 现 换行 。 
自动 换行 的 效果 类 似 。 
基本 语法 : 


<br/> 


语法 解释 : 


这 种 换行 和 浏览 器 的 


< br/> 标 记 不 是 成 对 出 现 的 ,是 一 个 单 标记 。 一 次 换行 使 用 一 个 < br/> 标 记 , 多 次 换行 


可 以 使 用 多 个 < br/> 标 记 。 
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【 例 2-8】 一 个 换行 标记 实例 。 


= 





<html> 
<head> 

<title> 换 行 标记 实例 </title> [DE 
</head> 视频 讲解 
<body> 


<p 兴 咏 柳 涂 br/> 贺 知 章 < br/> 正 玉 妆 成 一 树 高 ,< br/> 万 条 垂下 绿 丝 乡 。< br/> 不 知 细 叶 谁 裁 
出 ,<br/> 二 月 春风 似 剪 刀 。</p> 
</body> 
</html > 











网 页 效果 如 图 2-8 所 示 。 Er 





专家 点 拨 : HTML5 不 仅 符合 HTML 标准 也 遵循 | 闪 加 绩 s 四 下 收 wW(” 大 


XHTML 标准 ,XHTML 语法 比 HTML 语法 严谨 而 且 简 


洁 , 在 XHTML 语法 中 规定 不 成 对 的 单一 标记 必须 在 标 DETECTEDPL 
记 后 加 上 “/” 符 号 ,如 < br/>。HTML5 规范 也 建议 使 用 这 | 地 > 
样 的 标记 方式 。 二 交 研一 机 高， 
不 知 细 叶 谁 霄 出 | 
2.2.3 段落 对 齐 二 月 春风 似 前 刀 , 


如 果 要 设置 网 页 中 段落 的 对 齐 方式 ,可 以 使 用 < p > 标 
记 的 align 属性 。 
基本 语法 : 图 2-8 换行 标记 的 网 页 效果 





是 我 的 电脑 





<p align = value>…</p> 


语法 解释 ， 

在 < p > 标记 中 使 用 align 属性 可 以 设置 段落 的 对 齐 方式 ,其 中 value 有 4 个 值 : left( 左 
对 齐 ) ,right( 右 对 齐 ) ,center( 居 中 对 齐 ) 和 justify( 两 端 对 齐 ) 。 

【 例 2-9】 一 个 段落 对 齐 的 实例 。 


< 

<html> 

<head> 
<title> 段 落 对 齐 </title> 

</head> 

<body> 
<p>align 属 性 的 应 用 </p> 
<p align = center > 在 网 页 设计 时 ,文字 段落 制作 的 层次 分 明 ,< br > 才能 让 浏览 者 更 好 地 阅读 。 
<br> 也 使 得 网 页 看 起 来 整洁 .美观 。</p> 

</body> 

</html > 





程序 运行 时 的 网 页 效果 如 图 2-9 所 示 。 





当 段 落 对 齐 - 了 icrosoft Internet Exzplorer 
文件 四 ”编辑 查看) 收 阅 工具 CD) 帮助 0D 
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align 属 性 的 应 用 





在 网 页 设计 时 ， 文 字段 落 制 作 的 层次 分 明 ， 
才能 让 浏览 者 更 好 地 阅读 。 
也 使 得 网 贝 看 起 来 整洁 、 美 观 








图 2-9 段落 对 齐 的 网 页 效果 


2.2.4 标题 


一 个 网 站 的 网 页 中 或 者 一 篇 独立 的 文章 中 ,通常 都 会 有 一 个 醒目 的 标题 ,告诉 浏览 者 
这 个 网 站 的 名 称 或 该 文章 的 主题 。HTML 的 标题 标记 主要 用 来 快速 设置 文本 标题 的 格式 ， 
典型 的 形式 是 < hl ></hl >, 它 用 来 设置 第 一 级 标题 ,< h2 ></h2 > 设置 第 二 级 标题 ,以 此 
类 推 。 
基本 语法 : 


<h# align = left|center|right >…</h#> 


语法 解释 : 

标题 标记 用 来 定义 六 级 标题 ,从 一 级 到 六 级 ,每 级 标题 的 字体 大 小 依次 递减 。 标 题 标记 
本 身 具 有 换行 的 作用 ,标题 总 是 从 新 的 一 行 开 始 。# 用 来 指定 标题 文字 的 大 小 ,# 取 值 为 
1 一 6 的 整数 , 取 1 时 文字 最 大 , 取 6 时 文字 最 小 。align 是 设置 标题 的 对 齐 属性 。 

【 例 2-10】 一 个 标题 应 用 的 实例 。 


<! -- 程序 2-10 --> 
< html > 
< head> 
<title> 标 题 </title> 
</head> 
<body> 
<p > 标题 的 应 用 </p> 
<hl > 一 级 标题 </hl > 
<h2 > 二 级 标题 </h2 > 
<h3 > 三 级 标题 </h3 > 
<h4 align = center > 四 级 标题 </h4 > 
<h5 align = left > 五 级 标题 </h5 > 
<h6 align = right > 六 级 标题 </h6 > 
</body> 
</html > 





制作 网 页 内 容 


地 咏 趴 


Web 前 端 届 计 与 开发 一 一 感 TML5 十 CSS3 十 JavaScript 微 课 版 





上 述 程序 中 应 用 了 6 种 标题 ,并 且 后 面 三 级 标题 还 设置 了 对 齐 方式 。 网 页 效果 如 图 2-10 
所 示 。 
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图 2-10 标题 的 网 页 效果 


2.2.5 水 平分 着 线 


可 以 在 段落 与 段落 之 间 添 加 水 平分 割 线 , 这 样 可 以 使 网 页 文档 结构 清晰 ,层次 分 明 。 
基本 语法 : 


<hr /> 


语法 解释 : 

<hr/> 的 作用 是 添加 分 割 线 。 在 HTML4 中 < hr > 标记 有 改变 外 观 的 属性 ,如 size、 
color 等 。 在 HTML5 中 不 再 支持 ,可 以 使 用 CSS 实现 。 在 HTML5 中 < hr/ > 表示 主 题 结 
束 , 而 不 是 水 平 线 , 虽 然 显示 相同 。 

【 例 2-11】 水 平分 割 线 的 实例 。 


<! -- 程序 2-11 --> 
< html > 
<head> 
<title> 水 平分 割 线 </title> 
</head> 
<body> 
<p> 水 平分 割 线 的 应 用 </p> 
<hr> 
<p> 在 网 页 设计 时 ,文字 段落 制作 的 层次 分 明 , 才 能 让 浏览 者 更 好 地 阅读 。 也 使 得 网 页 看 起 来 整 
洁 、 美 观 。</p> 
< 
<p> 在 文本 编辑 器 中 按 下 回 车 键 可 以 创建 一 个 新 的 段落 ,但 是 这 会 被 HTML 忽略 。</p> 
</body> 
</html> 








二 
视频 讲解 





上 述 程序 中 用 < hr/> 标 记 插入 了 两 个 水 平分 割 线 , 网 页 效果 如 图 2-11 所 示 。 
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在 网 页 设计 时 ， 家 让 和 仙人 的 时 人 估 明和 2 
者 更 好 地 阅读 。 也 使 得 网 页 看 起 来 整洁 
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图 2-11 水 平分 割 线 的 网 页 效果 


2.3 列 


列表 是 HTML 中 组 织 多 个 段落 文本 的 一 种 方式 ,包括 无 序列 表 (Unordered List)、 有 


表 


序列 表 (Ordered List) 和 定义 列表 (Definition List) 。 


2.3.1 无 序列 表 


序列 表 在 每 个 列表 项 目 之 前 使 用 一 个 项 目 符号 ,各 个 列表 项 目 之 间 属 于 并 列 关系 , 没 


有 特定 的 先后 顺序 之 分 。 
基本 语法 


<ul type=" "> 
<1i> 项 目 名 称 </1i> 
<1i> 项 目 名 称 </1i> 
<1i> 项 目 名 称 </1i> 
</ul> 
语法 解释 : 
无 序列 表 由 < ul > 标记 开始 ,每 个 列表 项 由 < li > 


(1) disc: 指定 项 目 符号 为 一 个 实心 圆 点 (@)。 
(2) circle: 指定 项 目 符号 为 一 个 空心 圆 点 ( 〇 ) 。 


标记 开始 。 使 用 type 属性 可 以 指定 出 
现在 列表 项 前 的 项 目 符号 的 样式 ,type 局 性 值 及 其 对 应 的 符号 样式 如 下 所 壕 。 


IE 浏览 器 默认 的 type 


(3) square: 指定 项 目 符号 为 一 个 实心 方块 ( 国 ) 。 





属性 值 为 disc。 


制作 网 页 内 容 


地 已 四 


Web 前 端 届 计 与 开发 一 一 TML5 十 CSS3 十 JavaScript 微 课 版 





【 例 2-12】 一 个 无 序列 表 的 实例 。 
< == 程序 2=12 ==> 
< html> 
<head> 

<title> 无 序列 表 </title> 
</head> 
<body> 

<b > 推荐 图 书 </b> 

<ul> 


<1i>JSP 动态 网 站 开发 基础 与 上 机 指导 </1i> 
<1i>Flash 动画 制 作 基础 与 上 机 指导 </1i> 
<1i>0ffice 办 公 应 用 基础 与 上 机 指导 </1i> 
<1i> Authorware 多 媒体 制作 基础 与 上 机 指导 </1i> 
<1i> 网 页 设计 基础 与 上 机 指导 </1i> 
</ul> 
</body> 
</html > 


上 述 代码 执行 后 ,网 页 效果 如 图 2-12 所 示 。 





列表 项 目前 的 项 目 符号 显示 为 实心 圆 点 ， 


这 是 系统 默认 的 样式 。 如 果 想 改变 项 目 符号 的 样式 ,可 以 设置 type 属性 为 相应 的 值 。 


入 无 序列 表 
文件 四 编辑 下 ) 


Om 


Microsoft Inte 


查看 QW 收藏 人 工具 QI) 


© BEG@ Per wm 人 @ 


回回 因 


rnet Explorer 


帮助 00 





直 址 加) | 自 6 web\pert2\ 程 序 2-12.htnl. 


推荐 图 书 


。 了 JSP 动态 网 站 开发 基础 与 上 机 指导 

。 了 Flash 动画 制作 基础 与 上 机 指导 

。 Ofice 办 公 应 用 基础 与 上 机 指导 

。 Authorware 多 媒体 制作 基础 与 上 机 指导 
。 网 页 设计 基础 与 上 机 指导 





图 2-12 无 序 


2.3.2 有 序列 表 


有 序列 表 用 数字 顺序 为 列表 中 的 项 目 进 
列表 中 ,每 个 列表 项 前 标 有 数字 ,表示 顺序 。 
基本 语法 
<ol type=" "> 
<1i> 项 目 名 称 </1i> 


<1i> 项 目 名 称 </1i> 
<1i> 项 目 名 称 </1i> 


</ol> 





列表 的 网 页 效果 


行 编号 ,各 个 列表 项 目 有 先后 顺序 之 分 。 有 序 


语法 解释 : 





有 序列 表 由 < ol > 标记 开始 ,每 个 列表 项 由 < li > 标记 开始 。 使 用 type 属性 可 以 指定 出 
现在 列表 项 前 的 项 目 编号 的 样式 ,type 属性 值 及 其 对 应 的 项 目 编号 样式 如 下 所 述 。 


(1) 1: 指定 项 目 编号 为 阿拉 伯 数 字 。 这 也 是 I 下 浏览 器 默认 的 项 目 
(2) a: 指定 项 目 编号 为 小 写 英文 字母 。 

(3) A: 指定 项 目 编号 为 大 写 英文 字母 。 

(4) i: 指定 项 目 编号 为 小 写 罗马 数字 。 

(5) I: 指定 项 目 编号 为 大 写 罗马 数字 。 

【 例 2-13】 一 个 有 序列 表 的 实例 。 


<! =-- 程序 2-13--> 
<html> 
<head> 
<title> 有 序列 表 </title> 
</head> 
<body> 
<b> 推 荐 图 书 </b> 
<ol> 
<1i>JSP 动态 网 站 开发 基础 与 上 机 指导 </1i> 
<1i> Flash 动画 制 作 基础 与 上 机 指导 </1i> 
<1i> 0ffice 办 公 应 用 基础 与 上 机 指导 </1i> 
<1i> Authorware 多 媒体 制作 基础 与 上 机 指导 </1i> 
<1i> 网 页 设计 基础 与 上 机 指导 </1i> 
</ol > 
</body> 
</html > 


编号 样式 。 





上 述 代 码 执行 后 ,网 页 效果 如 图 2-13 所 示 。 列 表 项 目前 的 项 目 编号 显示 为 阿拉 伯 数 


字 , 这 是 系统 默认 的 样式 。 如 果 想 改变 项 目 编号 的 样式 ,可 以 设置 type 


四 有 序列 表 - 了 icrosoft Internet Explorer 
文件 @) 编辑 EE) 查看 WD) 收 宋 人 工具 GD) 帮助 0 


@e- 日 .上 国 约 Pe mx @ | 
简 6 \web\part2\ 程 序 2-13. htnl 

推荐 图 书 
JSP 动 态 网 站 开发 基础 与 上 机 指导 


Flash 动 画 制作 基础 与 上 机 指导 
Ofice 办 公 应 用 基础 与 





上 机 指导 
Authorware 多 媒体 制作 基础 与 上 机 指导 
网 页 设计 基础 与 上 机 指导 








图 2-13 有 序列 表 的 网 页 效果 





属性 为 相应 的 值 。 
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通常 ,在 指定 列表 项 目的 编号 样式 后 ,浏览 器 会 从 1.a、A\i 或 1 开始 自动 编号 。 在 使 用 
有 序列 表 标 记 的 start 属性 后 , 则 可 以 改变 编号 的 起 始 值 。start 属性 值 是 一 个 整数 ,表示 从 
哪 一 个 数字 或 者 字母 开始 编号 。 

【 例 2-14】 一 个 改变 编号 起 始 值 的 实例 。 





< 一 程序 2=14==> 
<html> 
<head> 
<title> 有 序列 表 : 改变 编号 起 始 值 </title> 
</head> 
<body> 
<b > 推荐 图 书 </b> 
<ol type = "A" start = "5"> 
<1i>JSP 动态 网 站 开发 基础 与 上 机 指导 </1i> 
<1i> Flash 动 画 制 作 基础 与 上 机 指导 </1i> 
<1i> Office 办 公 应 用 基础 与 上 机 指导 </1i> 
<1i> Authorware 多 媒体 制作 基础 与 上 机 指导 </1i> 
<1i> 网 页 设计 基础 与 上 机 指导 </1i> 
</ol> 
</body> 
</html > 





上 述 代码 执行 后 ,网 页 效果 如 图 2-14 所 示 。 这 里 设置 type 属性 值 为 A,start 属性 值 为 
5, 所 以 项 目 编号 从 大 写字 母 E 开始 。 


沪 有 序列 表 ， 改变 编号 起 始 值 - Microsoft Internet ... [| 口 | 区 
文件 @) 编辑 到 ) 查看 WD 收 亭 &) 工具 QD 帮助 00 心 
On- © -BO Pr wm © 

地 址 加) | 息 6:\web\part2\ 程 序 2-14. htnl 

推荐 图 书 


。JSP 动 态 网 站 开发 基础 与 上 机 指导 
。 Flash 动画 制作 基础 与 上 机 指导 


Authorware 多 媒体 制作 基础 与 上 机 指导 


F 
G6。0ffice 办 公 应 用 基础 与 上 机 指导 
H 
I， 网 页 设计 基础 与 上 机 指导 





图 2-14 改变 有 序列 表 的 编号 起 始 值 网 页 效果 


专家 点 拨 : 除了 对 < ul > 或 < ol > 进行 属性 设置 外 ,还 可 以 对 < li > 进行 属性 设置 。 另外， 
列表 还 可 以 谋 套 使 用 ,也 就 是 一 个 列表 中 还 可 以 包含 有 多 层 子 列表 。 读 者 可 以 查阅 相关 的 
资料 进行 学 习 。 


2.3.3 定义 列表 


在 HTML5 中 ,除了 可 以 应 用 上 面 的 方法 进行 列表 设置 外 ,还 可 以 应 用 定义 列表 完成 
列表 的 定义 ,定义 列表 主要 应 用 于 做 网 站 尾部 及 图 文 混 排 等 相关 信息 。 

在 定义 列表 中 , 先 通过 < dl > 标记 作为 定义 列表 的 声明 ,使 用 < dt > 标记 (dt 是 definition 
title 的 缩写 ) 定 义 列表 中 的 所 有 标题 ,使 用 < dd > 标记 (dd 是 definition description 的 缩写 ) 
给 每 个 标题 添加 描述 信息 。 

基本 语法 : 


<dl> 
<dt> 标 题 一 </dt > 
<dd> 描 述 一 </dd > 
<dt> 标 题 二 </dt > 
<dd> 描 述 二 </dd > 


</dl> 


语法 解释 : 

定义 列表 由 < dl > 标记 开始 ,通过 < dt > 标记 定义 列表 中 的 所 有 标题 ,然后 再 通过 < dd > 
标记 给 每 个 标题 添加 描述 信息 。< dl > 标记 是 这 个 列表 的 一 个 容器 ,就 像 一 个 箱子 ,这 个 
箱子 中 有 两 个 内 容 ,一 个 是 < dt > 标记 ,是 名 称 , 表 示 标 题 ; 另 一 个 < dd > 标记 ,是 解释 ,是 
内 容 。< dt > 与 < dd > 都 是 盒子 ,< dd > 只 对 应 解释 它 上 面 的 一 个 < dt > ,不 能 越级 或 是 向 下 
解释 。 

【 例 2-15】 一 个 定义 列表 的 实例 。 


<! -- 程序 2-15 --> 
<html > 
<head> 
<title> 定 义 列表 实例 </title> 
</head> 
<body> 
<dl> 
<dt> 雾 </dt> 
<dd> 雾 是 由 大 量 悬 浮 在 近 地 面 空气 中 的 微小 水 滴 组 成 的 ,使 水 平 能 见 度 低 于 lkm 的 空气 浑浊 现 
象 </dd> 
<dt> 扯 </dt > 
<dd> 者 是 大 量 微小 尘 粒 、 烟 粒 或 盐 粒 等 均匀 浮游 空中 ,使 水 平 能 见 度 低 于 10kn 的 空气 普遍 混浊 
现象 </dd> 
</dl> 
</body> 
</html> 





上 述 代 码 执行 后 ,网 页 效果 如 图 2-15 所 示 。 
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下 定义 列表 实例 - Microsoft Internet Explorer 轩 回 固 
文件 外 编辑 @) 查看 收 章 亿 工具 上 帮助 加 3 


@=- ©- 国 国 @ Pr mr 四 | “ 


地址 部) | 各 C:\Documents snd SettingsWdninistrater\ 旧 面 viO 国 | 图 苇 到 





震 是 由 大 量 甚 浮 在 近 地 面 空气 中 的 微小 水 消 组 成 的 ， 
使 水 平 能 见 度 低 于 1km 的 空气 浑 沁 现 象 


肚 是 大 量 微 小 尘 粒 、 烟 粒 或 盐 粒 等 均匀 浮游 宝 中 ,使 
水 平 能 见 度 低 于 10km 的 空气 普遍 混浊 现象 








图 2-15 定义 列表 实例 网 页 效果 


2.4 图 片 


图 片 是 网 页 中 最 常用 的 元 素 , 要 想 制 作 漂亮 的 网 页 是 离 不 开 图 片 这 个 元 素 的 。 图 片 在 
网 页 中 具有 画龙点睛 的 作用 , 它 能 装饰 网 页 ,表达 网 站 的 情调 和 风格 。 但 在 网 页 上 加 入 的 图 
片 越 多 ,浏览 的 速度 就 越 慢 。 网 页 中 使 用 的 图 片 可 以 是 GIF JPEG 、BMP、TIFF、PNG 等 格 
式 的 文件 ,而 目前 使 用 最 广泛 的 主要 是 GIF JPEG 和 PNG 3 种 格式 。 


2.4.1 <img> 标 记 


在 HTML 文档 中 ,引用 图 片 必 须 用 < img > 标记 。 
基本 语法 


< img src = "url"> 


语法 解释 : 

< img > 标记 的 基本 属性 是 src 属性 ,src 的 属性 值 为 所 引用 的 图 片 的 URL 地 址 。src 属 
性 是 必需 的 。url 可 以 是 绝对 地 址 ,也 可 以 是 相对 地 址 。 除 了 src 属性 外 ,< img > 标记 还 包 
含 其 他 一 些 属性 ,具体 情况 如 表 2-2 所 示 。 


表 2-2 < img> 标 记 的 属性 及 其 功能 说 明 











属 性 功能 说 明 

sre 指定 图 片 源 , 即 图 片 的 URL 路 径 
width 指定 图 片 的 显示 宽度 

height 指定 图 片 的 显示 高 度 

hspace 指定 图 片 的 水 平 间距 

vspace 指定 图 片 的 垂直 间距 

align 指定 图 片 的 对 齐 方 式 

border 指定 图 片 的 边框 大 小 

alt 显示 图 片 的 说 明文 字 





【 例 2-16】 < img > 标记 应 用 的 实例 。 


<! -- 程序 2-16--> 
<html> 
<head> 
<title> 在 网 页 中 应 用 图 片 </title> 
</head> 
<body> 
<! -使 用 相对 路 径 指定 url -> 
<img src="../images/qiche001. jpg"> 
</br> 
</br> 
<! -使 用 绝对 路 径 指定 url -> 


< img src = "http://www. cai8.net/images/banner. jpg"> 


</body> 
</html > 





上 述 代码 中 分 别 用 相对 路 径 和 绝对 路 径 插 入 了 两 幅 图 片 ,网 页 效果 如 图 2-16 所 示 。 


怠 在 网 页 中 应 用 图 片 - Microsoft Internet Explorer 


文件 四 编辑 下 ) 查看 WW) 收藏 A) 工具 加 ) 
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图 2-16 插入 图 片 的 网 页 效果 


2.4.2 指定 图 像 的 尺寸 








默认 情况 下 ,在 网 页 中 显示 的 是 图 像 的 原始 尺寸 。 如 果 想 在 显示 图 像 时 更 改 其 尺寸 ,就 





需要 采用 < img > 标记 的 width 和 height 属性 。 
基本 语法 : 


mn 


< img src= "url" width=" " height=" "> 


语法 解释 : 


width 和 height 的 单位 可 以 是 像素 (绝对 尺寸 ), 也 可 以 是 百分比 (相对 尺寸 )。 百 分 比 
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表示 显示 图 像 尺 寸 为 浏览 器 窗口 尺寸 的 百分比 。 在 width 和 height 属性 中 ,如 果 只 设置 了 
其 中 一 个 属性 , 则 另 一 个 属性 会 根据 已 设置 的 属性 值 按 原 图 等 比例 显示 。 如 果 对 两 个 属性 
都 进行 了 设置 , 且 其 缩放 比例 和 原 图 尺寸 的 比例 不 一 致 ,显示 的 图 像 会 相对 于 原 图 变形 或 











失真 。 
【 例 2-17】〗 width 和 height 属性 的 应 用 实例 。 








== 程序 2=17 =-> 
<html> 
<head> 
<title> 图 像 尺 寸 的 设置 </title> 
</head> 
<body> 
<img src="../images/qiche001. jpg" width = "100"> 
</br> 
</br> 
-使 用 相对 尺寸 -> 
<img src="../images/qiche001. jpg" width= "50% "> 
</body> 
</html> 





上 述 程序 分 别 用 绝对 尺寸 和 相对 尺寸 的 方式 设置 了 同一 幅 图 片 的 width 属性 ,网 页 效 
果 如 图 2-17 所 示 。 原 图 大 小 为 159 像素 X141 像素 。 第 一 个 图 像 设 置 宽 为 100 像素 ,高 度 


自动 按 等 比例 进行 了 设置 。 第 二 个 图 像 设置 宽 为 50%, 其 尺寸 显示 为 浏览 器 窗口 的 1/2。 


当 图 片 尺寸 的 设置 - Microsoft Internet Explorer 
文件 中” 编辑 于) 查看 WW) 收 评 0) 工具 XI) 帮助 0 


9 © -IOP Sa 


地 址 四) | 和 6:\web\part2\ 程 序 2-17. htnl 








图 2-17 指定 图 像 的 尺寸 的 网 页 效果 


2.4.3 指定 图 像 的 对 齐 方 式 


< img > 标记 的 align 属性 定义 了 图 像 相对 于 周围 元 素 的 水 平和 垂直 对 齐 方式 。 
基本 语法 : 

















< jmg src= "url" align=" "> 


语法 解释 : 


HTML5 标准 指定 了 5 种 





图 像 对 齐 属 性 值 , 如 表 2-3 所 示 。 除 此 之 外 ,Netscape 又 增加 


了 4 种 垂直 对 齐 属性 : texttop .absmiddle baseline 和 absbottom,Internet Explorer 则 增加 
了 center。 不同 的 浏览 器 以 及 同一 浏览 器 的 不 同 版 本 对 align 属性 的 某 些 值 的 处 理 方式 是 














不 同 的 。 
表 2-3 align 属性 取 值 及 其 功能 说 明 

属 性 功能 说 明 
left 在 水 平方 向 上 向 上 左 对 齐 
right 在 水 平方 向 上 向 上 右 对 齐 
middle 图 片 中 部 与 同行 其 他 元 素 中 部 对 齐 
top 图 片 顶 部 与 同行 其 他 元 素 顶 部 对 齐 
bottom 图 片 底部 与 同行 其 他 元 素 底部 对 齐 

【 例 2-18】 align 属性 应 用 的 实例 。 

<! -- 程序 2-18 --> 

< html> 

<head> 

<title> 图 像 对 齐 方式 的 设置 </title> 
</head> 
<body> 


<h2 > 在 文字 中 垂直 对 齐 图 像 : </h2> 
<p> 图 像 < img src ="../images/qiche001. jpg" width= "60" align = "bottom"> 在 文本 中 </p> 
<p> 图 像 < img src ="../images/qiche001. jpg" width= "60" align = "middle"> 在 文本 中 </p> 
<p> 图 像 < img src ="../images/qiche001. jpg" width= "60" align = "top"> 在 文本 中 </p> 
<h2 > 在 文字 中 水 平 对 齐 图 像 : </h2> 
<p>< img src ="../images/qiche001. jpg" width= "60" align= "left"> 带 有 图 像 的 一 个 段落 。 
图 像 的 align 属性 设置 为 left, 图 像 将 浮动 到 文本 的 左 侧 。 


</p> 


<p>< img src ="../images/qiche001. jpg" width= "60" align = "right"> 带 有 图 像 的 一 个 段 
落 。 图 像 的 align 属性 设置 为 right, 图 像 将 浮动 到 文本 的 右 侧 。 


</p> 
</body> 
</html > 


上 述 程序 分 别 演示 了 在 文字 段落 中 垂直 对 齐 图 像 和 水 平 对 齐 图 像 , 网 页 效果 如 图 2-18 


所 示 。 


专家 点 拨 : 在 Web 标准 中 ,不 推荐 使 用 < img > 标记 的 align 属性 进行 图 像 对 齐 方式 的 
设置 ,而 是 推荐 使 用 表格 对 齐 内 容 或 者 使 用 CSS 的 相应 技术 。 
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在 文字 中 垂直 对 齐 图 像 : 


, 国 .. 
nn 本国 = 





二 中 
A 


在 文字 中 水 平 对 齐 图 像 : 


四 加 带 有 图 像 的 一 Wd 图 像 的 aien 属 性 设置 为 right, 图 像 将 浮动 
到 文本 的 左 侧 


过 个 有 党 图 像 的 aien 属 性 设置 为 right ， “a 





到 文本 的 右 侧 








旺 我 的 电脑 


图 2-18 设置 图 像 对 齐 方式 的 网 页 效果 


2.4.4 指定 图 像 的 间距 


通常 情况 下 ,网 页 中 的 图 像 与 其 周围 文字 之 间 默 认 的 是 两 个 像素 的 距离 ,对 于 大 多 数 设 
计 者 来 说 这 样 的 间距 有 些小 。hspace 和 vspace 属性 可 以 给 图 像 一 个 自由 呼吸 的 空间 。 通 
过 hspace 属性 ,可 以 以 像素 为 单位 ,指定 图 像 的 水 平 间距 ; 而 vspace 属性 则 可 以 指定 图 像 
的 垂直 间距 

基本 语法 


< img src = "url" hspace=" "> 
< img src= "url" vspace=" "> 


语法 解释 : 

hspace 属性 设置 图 片 与 相 邻 元 素 的 水 平 间 距 , vspace 属性 设置 图 片 与 相 邻 元 素 的 垂直 
间距 。 属 性 值 为 数字 ,单位 为 像素 。 

【 例 2-19】 一 个 使 用 hspace 和 vspace 属性 的 实例 。 




















<! -- 程序 2-19 --> 

<html> 

<head> 
<title> 图 像 间 距 的 设置 </title> 

</head> 





<body> 
<h3 > 不 带 有 hspace 和 vspace 的 图 像 : </h3 > 
<p> 
<img src="../images/qiche001. jpg" width= "90" align = "middle"> 
这 是 一 辆 新 开发 的 汽车 ,动力 十 足 。 这 辆 汽车 采用 了 最 先进 的 动力 技术 。 
</p> 
<h3> 带 有 hspace 和 vspace 的 图 像 : </h3 > 
<p> 
< img src = "../images/qiche001. jpg" width= "90" align = "middle" hspace = "30" vspace = "30"> 
这 是 一 辆 新 开发 的 汽车 ,动力 十 足 。 这 辆 汽车 采用 了 最 先进 的 动力 技术 。 
</p> 

</body> 

</html > 


上 述 程序 通过 两 种 方式 显示 同一 幅 图 片 和 同一 段 文字 。 第 一 种 方式 没有 设置 图 像 和 周 
目 元 素 之 间 的 间距 ; 第 二 种 方式 设置 了 图 像 和 周围 元 素 的 间距 。 网 页 效果 如 图 2-19 所 示 。 
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不 带 有 hspace 和 vspace 的 图 像 : 





这 是 一 辆 新 开发 的 汽车 ,动力 十 足 。 这 辆 汽车 


采用 了 最 先进 的 动力 技术 。 








图 2-19 设置 图 像 间距 的 网 页 效果 


专家 点 拨 : 在 Web 标准 中 ,不 推荐 使 用 < img > 标记 的 hspace 和 vspace 属性 进行 图 像 
间距 的 设置 ,而 是 推荐 使 用 CSS 的 外 边 距 属性 和 内 边 距 属 性 进行 设置 。 


2.4.5 图 像 的 替换 文本 


图 像 的 替代 文本 是 指 图 像 不 能 显示 时 在 图 像 所 在 位 置 显示 的 一 段 文本 ,或 当 图 像 正常 
显示 时 鼠标 指针 移 到 图 像 上 显示 的 一 段 文本 。 
基本 语法 : 
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<img src= "url" alt=" "> 


语法 解释 : 

< img > 标记 的 alt 属性 用 于 对 图 像 信息 进行 文字 描述 。 在 浏览 器 中 , 当 图 像 无 法 正 
显示 时 ,在 图 像 位 置 显示 一 段 蔡 换文 本 ,告诉 用 户 该 处 是 一 幅 什么 样 的 图 像 。 当 图 像 可 以 
常 显示 时 ,把 鼠标 指针 放 在 图 像 上 时 也 可 以 显示 该 替换 文本 。 

【 例 2-20】 alt 属性 的 应 用 实例 。 








局 妹 




















<! -=- 程序 2=20--> 
<html> 
<head> 
<title > 图 像 的 替换 文本 </title> 
</head> 
<body> 
<img src = "../images/qiche001. jpg" alt= "新 动力 汽车 "> 
</br> 
<img src = "qiche001. jpg" alt = "新 动力 汽车 "> 
</body> 
</html > 





以 上 程序 代码 应 用 了 两 次 alt 属性 ,网 页 效果 如 图 2-20 所 示 。 第 一 幅 图 像 正常 显示 , 当 
鼠标 指针 放 在 图 像 上 时 ,显示 alt 属性 的 值 ; 第 二 幅 图 像 由 于 路 径 错误 而 未 能 显示 ,其 alt 属 
性 的 值 就 显示 在 图 像 的 位 置 。 
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图 2-20 图 像 的 替换 文本 网 页 效果 


2.4.6 图 像 的 边框 


默认 情况 下 ,网 页 中 显示 的 图 像 没 有 边框 ,为 了 突出 显示 图 像 ,可 以 为 一 幅 图 像 加 上 
边框 。 














基本 语法 : 


< img src = "url" border=" "> 


语法 解释 : 
border 属性 的 值 用 数字 表示 ,默认 单位 为 bx。 图像 边框 的 颜色 不 可 调整 ,默认 为 黑色 。 














如 果 图 像 作 为 超级 链接 使 用 ,那么 图 像 边框 的 颜色 和 文字 超 链接 的 颜色 一 致 ,默认 为 深 


蓝 色 。 


像 显 

















【 例 2-21】 设置 图 像 边框 的 实例 。 








== 程序 2=21==> 
<html> 
<head> 
<title> 图 像 的 边框 </title> 
</head> 
<body> 
<! -默认 情况 下 , border = 0, 图像 不 带 边框 -> 
< img src=",,/images/qiche001. jpg"> 
<! -边框 为 5 像素 的 图 像 -> 
< img src = "../images/qiche001. jpg" border = "5"> 
<! -边框 为 5 像素 ,并 且 作 为 超 链接 的 图 像 -> 
<a href = "程序 2- 19. html">< img src="../images/qiche001. jpg" border = "5"></a> 
</body> 
</html> 





上 述 程序 代码 执行 后 ,网 页 效果 如 图 2-21 所 示 。 第 一 幅 图 像 默 认 没 有 边框 ; 第 二 幅 图 
示 5 像素 的 黑色 边框 ; 第 三 幅 图 像 由 于 被 设置 成 超级 链接 ,所 以 显示 5 像素 的 蓝 色 
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2-21 设置 图 像 边 框 的 网 页 效果 
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2.5 移动 的 文字 


移动 的 文字 可 以 增加 文字 的 动态 效果 ,引起 浏览 者 的 注意 ,丰富 网 页 的 内 容 。 在 
HTML 文档 中 ,插入 移动 的 文字 使 用 的 标记 是 < marquee >。 


2.5.1 <marquee > 标记 
基本 语法 : 


<marquee > 移动 文字 内 容 </marquee> 


语法 解释 : 

在 < marquee > 和 </marquee > 标记 之 间 放 置 需要 添加 移动 效果 的 文字 ,可 以 设置 文字 
的 字体 、 大 小 和 颜色 等 。 

【 例 2-22】 < marquee > 标记 的 基本 应 用 实例 。 


<! -- 程序 2-22--> 
<html> 
<head> 

<title > 移动 文字 效果 </title> rt 
</head> 视频 讲解 
<body> 

<marquee >< font face = "宋体 " size= "4"> 欢 迎 大 家 访问 本 站 !</font ></marquee > 
</body> 
</html > 

















上 述 程序 运行 时 ,在 浏览 器 窗口 中 文字 从 右 向 左 移动 ,网 页 效果 如 图 2-22 所 示 。 
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欢迎 大 家 访问 本 站 ! 








图 2-22 文字 移动 网 页 效果 (1) 


2.5.2 文字 移动 属性 


在 < marquee > 标记 中 还 可 以 设置 各 种 属性 ,如 表 2-4 所 示 。 这 些 属性 是 可 选 参数 ,可 以 
丰富 文字 移动 效果 的 功能 。 


表 2-4 < marquee > 标记 属性 及 其 功能 说 明 












































届 ”性 功能 说 明 属性 取 值 各 属性 值 的 功能 

seroll 循环 移动 (默认 值 ) 
bela 设置 文字 的 移动 方式 [slide 移动 一 次 停止 

alternate 来 回 交替 移动 

left 从 右 向 左 移动 (默认 值 ) 

和 ee 
direction 设置 文字 的 移动 方向 。 一 人 

down 从 上 向 下 移动 

MI 后 加 

dik 设置 文字 的 背景 颜色 。 | 交 文 颜色 名 称 | 表示 所 用 颜色 

(或 者 拓 rrggbb) 
es Lv wm | 设置 背景 的 绝对 宽度 (或 者 设置 背 
width 设置 文字 背景 的 宽 数字 (或 者 百分比 ) 景 相对 于 浏览 器 窗口 的 宽度 大 小 ) 
二 ta brn/ | 设置 青 景 的 绝对 高 度 (或 者 设置 表 
height 设置 文字 背景 的 高 数字 (或 者 百分比 ) 景 相对 于 浏览 器 窗口 的 高 度 大 小 ) 
bopace 和 venace | 设置 文字 背景 和 周转 其 | 信 二 设置 文字 背景 和 周围 其 他 元 素 的 空 
PP? | 他 元 素 的 空白 间距 白 间距 的 绝对 什 
i 设置 移动 文字 的 循环 文字 移动 无 限 次 (默认 值 ) 
i 次 数 正 整数 mn 文字 移动 a 次 

设置 移动 文字 每 次 移动 | 数字 a 
scrollmount 的 距离 (默认 单位 为 px) 文字 每 次 移动 的 距离 
设置 移动 文字 每 次 移动 | 数字 ee 

Sci ela -4 @ 的 果 
Serolldleliy rt (默认 单位 为 ms) | 文字 每 次 移动 后 的 间 软 时 间 





【 例 2-23】 < marquee > 标记 的 属性 应 用 的 实例 。 


<! -- 程序 2-23 --> 

<html > 

<head> 
<title> 移 动 文 字 效果 </title> 

</head> 

< body> 
<marquee behavior = "alternate" direction = "right”bgcolor = "red" width = "300" height = 
"20"><font face= "宋体 " size = "4"> 欢 迎 大 家 访问 本 站 !</font ></marquee> 








上 述 程序 运行 时 ,浏览 器 窗口 出 现 一 个 宽度 为 300 像素 ,高度 为 20 像素 的 红色 背景 条 ， 
这 个 背景 范围 内 先 从 右 向 左 ,然后 从 左 向 右 来 回 交 替 移动 。 网 页 效果 如 图 2-23 
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图 2-23 文字 移动 网 页 效果 (2) 


2.6 其 他 多 媒体 文件 


多 媒体 技术 是 当今 Internet 持续 流行 的 一 个 重要 动力 。 早 期 的 网 页 大 多 是 由 文字 或 者 
图 像 构成 的 ,由 于 多 媒体 技术 的 发 展 ,音乐 ,动画 .视频 等 媒体 的 应 用 越 来 越 广泛 。 音 乐 网 
站 ,电影 网 站 ,播客 等 融合 多 媒体 技术 的 网 站 越 来 越 多 。 本 节 介 绍 各 种 多 媒体 文件 在 网 页 中 
的 应 用 。 


2.6.1 <embed > 标记 


利用 < embed > 标记 可 以 在 网 页 中 插入 各 种 类 型 的 多 媒体 文件 ,如 WMV、MP3、AVI、 
MPEG .SWF .MOV、RMVB 等 。 
基本 语法 : 


< embed src = "url"> 


语法 解释 : 
在 使 用 < embed > 标记 之 前 ,需要 安装 相应 的 插件 ,否则 多 媒体 文件 不 能 正常 播放 。 对 
于 不 同 的 插件 ,< embed > 标记 的 属性 也 不 同 。src 属性 指定 多 媒体 文件 的 URL 来 源 , 即 其 
路 径 , 这 是 一 个 必 选 属性 。 
【 例 2-24】 一 个 利用 < embed > 标记 在 网 页 中 插入 Flash 动画 的 实例 。 




















Sb 一 程序 2 一 2 一 > 
<html> 
<head> 
<title> 在 网 页 中 插入 Flash 动画 </title> 
</head> 
<body> 





<center> 
<embed width = 550 height = 450 src = ". . /images/test. swf"> 
</center> 

</body> 

</html > 


上 述 程序 运行 时 ,在 网 页 中 显示 一 个 Flash 动画 ,效果 如 图 2-24 所 示 。 





当 在 网 页 中 插入 Flash 动 画 - Microsoft Internet Explorer 
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一 个 硫 原子 和 两 个 氧 原子 发 
生化 合 反 应 ， 生 成 二 氧化 硫 








图 2-24 在 网 页 中 应 用 Flash 动画 的 效果 


【 例 2-25】 一 个 利用 < embed > 标记 在 网 页 中 插入 MP3 音乐 文件 的 实例 。 





= 
<html> 
<head> 
<title> 在 网 页 中 插入 MP3 音乐 </title> 
</head> 
<body> 
<center> 





<embed src="../images/music.mp3" autostart = "true" loop= "true"> 
</center> 

</body> 

</html > 
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【 例 2-26】 一 个 利用 < embed > 标记 在 网 页 中 插入 mpeg 影像 的 实例 。 


= 和 峻 = 
<html> 
<head> 
<title> 在 网 页 中 插入 mpeg 影像 </title> 
</head> 
< body> 
<center> 
<embed src="../images/video.mpeg" autostart = "true" loop = "true"> 
</center > 
</body> 
</html > 





2.6.2 < bgsound > 标记 


利用 < bgsound > 标记 可 以 将 音乐 嵌入 到 网 页 中 ,其 参数 设置 不 多 ,可 以 播放 的 声音 文 
件 格式 包括 WAV、AU、MIDI、MP3 等 。 
基本 语法 : 


< bgsound src= "url" loop="#"> 


语法 解释 ， 

src 属性 指定 声音 文件 的 URL 来 源 , 即 其 路 径 , 是 必 选 属性 。loop 指定 声音 文件 的 循 
环 播 放 次 数 ,其 值 为 正 整数 n 时 可 指定 循环 播放 n 次 , 值 为 一 1 或 者 infinite 时 指定 循环 播 
放 无 限 次 。 

【 例 2-27】 利用 < bgsound > 标记 在 网 页 中 嵌入 背景 音乐 的 实例 。 


<! -- 程序 2-27 --> 
< html > 
<head> 
<title> 在 网 页 中 嵌入 背景 音乐 </title> 
</head> 
<body> 
<bgsound src="../images/music.mp3 " loop="—1"> 
</body> 
</html > 





专家 点 拨 : <object > 标记 也 可 以 用 来 在 网 页 中 插入 多 媒体 文件 。< object > 标记 用 于 包 
含 对 象 , 如 图 像 音 频 、 视 频 \Java 小 程序 .PDF 和 Flash 等 。 几 乎 所 有 主流 浏览 器 都 拥有 对 
< object > 标记 的 支持 。 


2.7 上 机 练习 与 指导 


2.7.1 制作 文字 网 页 
用 记事 本 程序 创建 一 个 HTML 文档 ,网 页 效果 如 图 2-25 所 示 。 


< 上 机 练 到 2 了 = 
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1. 0 Transitional//EN" " http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 
<html> 
<head> 
<meta http - equiv = "Content — Type" content = "text/html; charset = utf -8" /> 
<title> 上 机 练习 1</title> 
</head> 
<body> 
<h2 >< font color =" 井 CC0000"> 名 车 欣赏 </font ></h2 > 
<h3 > 进口 汽车 </h3 > 
<u> 
<1i> 宝 马 </1i> 
<1i> 奔 驰 </1i> 
<1i> 保 时 捷 </1i> 
<1i> 法 拉 利 </1i> 
<1i> 悍 马 </1i> 
</ul> 
<h3 > 国产 汽车 </h3 > 
<ul> 
<1i> 奇 瑞 </1i> 
<1i> 长 城 </1i> 
<1i> 奔 腾 </1i> 
<1i> 吉 利 </1i> 
<1i> 红 旗 </1i> 
</ul> 
<p><a href = "http://www.autohome. com.cn/"” target = "_blank"> 查 看 更 多 汽车 品牌 </a></p> 
<h4 > &copy; 版 权 所 有 2010 </h4 > 
<p> gnbsp; </p> 
</body> 
</html > 
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图 2-25 文字 网 页 效果 
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2.7.2 制作 图 文 混 排 网 页 


拟定 一 个 主题 ,如 宝马 汽车 新 闻 ,制作 一 个 图 文 混 排 的 网 页 效果 ,如 图 2-26 所 示 。 制 作 
时 可 以 上 网 搜索 相关 的 图 片 和 文字 。 
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现 身 环 保 目录 四 了 驱 版 宝马 750Li 将 进口 


2010 款 宝马 7 系 将 增加 采用 xDrive 四 驱 技术 的 新 车 款 ， 这 是 宝马 首次 为 其 旗舰 车 型 提供 全 轮 驱动 系 展 
统 。 在 环保 部 发 布 的 最 新 一 批 “ 型 式 核准 证 书 ”中 ， 我 们 看 到 了 BMW 750Li xDrive KC81 轿 车 的 身 
影 ， 这 意味 着 四 驱 版 宝马 750Li 的 引进 已 被 证 实 。 








图 2-26 图 文 混 排 网 页 效果 


二 ~= 上 机 练习 2=2 -=> 

<!DOCTYPE html PUBLIC " ~ //W3C//DTD XHTML 1. 0 Transitional//EN" " http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 ~ transitional. dtd"> 

<html> 

<head> 

<meta http - equiv = "Content - Type" content = "text/html; charset = utf - 8" /> 

<title> 上 机 练习 2</title> 

</head> 


<body> 

<p><img src="../images/ 宝 马 标志 . jpg" width = "69" height = "70" /><a href = "mailto:bmw@ 
126.com"> 给 编辑 发 邮件 

</a></p> 

<h2 align = "center"> 现 身 环保 目录 四 了 驱 版 宝马 750Li 将 进口 </h2> 

<p> gnbsp;&nbsp;&nbsp; gnbsp;2010 款 宝马 7 系 将 增加 采用 xDrive 四 驱 技 术 的 新 车 款 , 这 是 宝马 首 
次 为 其 旗舰 车 型 提供 全 轮 驱动 系统 。 在 环保 部 发 布 的 最 新 一 批 "型 式 核准 证 书 " 中 ,我 们 看 到 了 BMW 
750Li xDrive KC81 轿车 的 身影 ,这 意味 着 四 驱 版 宝马 750Li 的 引进 已 被 证 实 。</p> 


<p align = "center">< img src= "../images/ 宝 马 6. jpg" width= "383" height = "275" /></p> 
<p> gnbsp;&nbsp;&nbsp; gnbsp; 宝马 的 xDrive 全 轮 驱动 系统 ,能 够 迅速 改变 前 后 轴 的 扭矩 分 布 状态 ， 
提供 更 好 的 行车 稳定 性 及 安全 性 。xDrive 系统 的 可 调幅 度 较 广 , 能 通过 自动 计算 转弯 时 转向 不 足 或 
转向 过 度 的 情况 ,将 最 合适 的 扭力 分 配给 需要 的 车 轮 。</p> 

<palign= "center">< img src = "../images/ 宝 马 7. jpg" width= "389" height = "274" /></p> 





</body> 
</html > 
2.8 本 章 习 题 
一 、 选 择 题 
1. < b> 代表 内 联 文 本 ,通常 是 粗 体 ,没有 传递 表示 重要 的 意思 。HTMIL5 建议 使 用 ( » 
标记 ,表示 重要 性 而 不 是 强调 符号 。 
A. <strong> B. <embed> C. <table> D. < marquee > 
2. 下 列 选项 中 ,( ) 是 换行 标记 。 
A. < font > B. < br> C. < body > D. <p> 
3. 下 列 选项 中 ,在 定义 超 链接 时 ( ) 是 在 新 窗口 中 打开 网 页 文档 的 。 
A. _self B. _blank C. _top D. _parent 
4. 通过 ( ) 属 性 可 以 为 图 片 添加 边框 。 
A. img B. sre C. border D. bgcolor 
Sk ) 是 HTML5 新 增 的 标记 。 该 标记 的 作用 是 定义 声音 ,如 音乐 或 其 他 音频 流 。 
A. <video> B. <bgsound> C. <embed> D. <audio> 
二 、 填空 题 
1. 在 HTML 代码 中 ,用 来 表示 空格 的 特殊 符号 是 。 
2. 列表 是 HTML 中 组 织 多 个 段落 文本 的 一 种 方式 ,包括 、 和 定义 列 
表 (Definition List) 。 
3. 嵌 和 人 背景 音乐 的 HTML 代码 是 
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第 3 章 超级 链接 


由 HTML 制作 的 网 页 中 ,超级 链接 是 最 重要 的 内 容 之 一 ,通过 超级 链接 可 以 使 显示 的 
内 容 跳 转 到 一 个 对 象 。 超 级 链接 能 够 使 多 个 独立 的 网 页 之 间 产 生 一 定 的 相互 联系 ,从 而 使 
单独 的 网 页 形成 一 个 有 机 的 整体 。 

一 般 而 言 ,在 网 页 中 是 超级 链接 的 文字 会 有 特别 的 颜色 ,而 且 文字 的 下 面 会 有 下 画 线 ， 
当 鼠 标 指针 移 到 那些 文字 上 时 ,会 变 成 手指 形状 , 单 击 鼠标 则 会 链接 到 其 他 页 面 或 网 站 。 

本 章 主要 内 容 如 下 。 

。 认识 超级 链接 。 

。 创建 超级 链接 。 

， 常见 的 超级 链接 应 用 。 

。 图 像 映射 。 




















3.1 认识 超级 链接 


超级 链接 在 本 质 上 属于 一 个 网 页 的 一 部 分 , 它 是 一 种 允许 用 户 同 其 他 网 页 或 站 点 之 间 
进行 链接 的 元 素 。 各 个 网 页 链接 在 一 起 后 ,才能 真正 构成 一 个 网 站 。 


3.1.1 超级 链接 的 定义 


所 谓 的 超级 链接 又 称 超 链接 ,是 指 从 一 个 网 页 指向 一 个 目标 的 链接 关系 ,这 个 目标 可 以 
是 另 一 个 网 页 ,也 可 以 是 相同 网 页 上 的 不 同位 置 ,还 可 以 是 一 个 图 片 一 个 电子 邮件 地 址 一 
个 文件 ,甚至 是 一 个 应 用 程序 。 而 在 一 个 网 页 中 用 来 超 链接 的 对 象 ,可 以 是 一 段 文本 或 者 是 
一 个 图 片 。 当 浏览 者 单 击 已 经 链接 的 文字 或 图 片 后 ,链接 目标 将 显示 在 浏览 器 上 ,并 且 根 据 
目标 的 类 型 来 打开 或 运行 。 

例如 ,一 般 网 页 上 都 存在 栏目 导航 .每 个 栏目 都 对 应 着 一 个 超级 链接 ,图 3-1 所 示 的 是 
百度 首页 ,包含 新 闻 、 网 页 、 贴 吧 等 栏目 ,每 个 栏目 都 是 一 个 超级 链接 。 

当 单 击 “ 新 闻 ” 超 级 链接 时 ,页 面 就 会 跳 转 到 百度 新 闻 页 面 如 图 3-2 所 示 , 这 样 实现 了 与 
网 站 其 他 页 面 的 链接 。 


3.1.2 超级 链接 的 类 型 


1. 按照 链接 路 径 分 类 
按照 链接 路 径 的 不 同 , 网 页 中 超 链 接 一 般 分 为 内 部 链接 、 锚 点 链接 和 外 部 链接 3 种 类 型 。 
所 谓 内 部 链接 , 指 的 是 在 同一 个 网 站 内 部 ,不 同 的 HTML 页 面 之 间 的 链接 关系 ,在 建 
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立 网 站 内 部 链接 时 ,要 明确 哪个 是 主 链接 文件 ( 即 当 前 页 ) ,哪个 是 被 链接 文件 。 
所 谓 外 部 链接 , 指 的 是 跳 转 到 当前 网 站 外 部 ,与 其 他 网 站 中 页 面 或 其 他 元 素 之 间 的 链接 
所 谓 锚 点 链接 ,也 称 书签 链接 ,用 来 标记 文档 中 的 特定 位 置 ,使 其 可 以 跳 转 到 当前 文档 


或 其 他 文档 中 的 标记 位 置 。 在 网 页 中 加 入 锚 点 包括 两 方面 的 工作 : 一 是 在 网 页 中 创建 锚 
点 ; 二 是 为 锚 点 建立 链接 。 
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2. 按照 使 用 对 象 分 类 
如 果 按 照 使 用 对 象 的 不 同 ,网 页 中 的 链接 又 可 以 分 为 文本 超 链 接 、 图 像 超 链接 、E-mail 
链接 、 锚 点 链接 、 多 媒体 文件 链接 、 空 链接 等 。 


3.2 创建 超级 链接 


本 节 介 绍 如 何在 页 面 中 创建 超级 链接 ,包括 创建 外 部 链接 和 内 部 链接 ,最 后 介绍 如 何 改 
变 链接 的 颜色 。 


3.2.1 <a> 标 记 


设置 链接 的 基本 标记 是 < a ></a>', 被 其 包含 的 对 象 为 被 设置 为 超级 链接 的 对 象 。 
基本 语法 : 


<a href = "url" title= "指向 链接 显示 的 文字 ”target = "窗口 名 称 ” name = "超级 链接 名 称 " > 超 链 
接 名 称 </a> 


语法 解释 : 

(1) href 属性 用 于 设置 链接 的 目标 。 建 立 链接 时 ,属性 “href" 定 义 了 这 个 链接 所 指 的 目 
标 地 址 ,也 就 是 路 径 。 属 性 值 为 URL ,可 以 是 绝对 路 径 ,也 可 以 是 相对 路 径 。 理 解 一 个 文件 
到 要 链接 的 那个 文件 之 间 的 路 径 关 系 是 创建 链接 的 根本 。 每 一 个 网 站 都 具有 独一无二 的 地 
址 ,英文 中 被 称 作 URL(Uniform Resource Locator) , 即 统一 资源 定位 器 ,同一 个 网 站 下 的 
每 一 个 网 页 都 有 不 同 的 地 址 ,但 是 在 创建 一 个 网 站 的 网 页 时 ,不 需要 为 每 一 个 链接 都 输入 完 
整 的 地 址 ,只 需要 确定 当前 文档 同 站 点 根 目 录 之 间 的 相对 路 径 关 系 就 可 以 了 。 可 能 的 值 有 
绝对 URL、 相 对 URL 和 锚 URL。 

(2) title 属性 用 于 规定 有 关 链 接 的 额外 信息 ,鼠标 指针 悬 于 该 链接 上 方 时 显示 提示 。 

(3) target 用 于 指定 打开 链接 的 目标 窗口 ,其 属性 的 默认 方式 是 原 窗口 , 仅 在 href 属性 
存在 时 使 用 。 

(4) name 属性 用 于 规定 链接 的 名 称 。 

【 例 3-1】 一 个 超级 链接 的 实例 。 











xi 程序 :3 二 二 一 > 

<html > 

<head> 

<title> 超 级 链接 实例 </title> 

</head> 

<body> 

<a href = "http://www. sohu. com" > 搜狐 首页 </a> 
</body> 

</html > 





上 述 程序 中 用 < a > 标记 定义 了 一 个 链接 ,链接 目标 为 搜狐 首页 , 单 击 链接 显示 跳 转 到 搜 
狐 首 页 ,网 页 效果 如 图 3-3 所 示 。 
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图 3-3 超级 链接 网 页 效果 


专家 点 拨 : 在 HTML4. 01 中 ,<a> 标 记 既 可 以 是 超 链接 ,也 可 以 是 锚 。 这 取决 于 是 否 
描述 了 href 属性 。 在 HTML5 中 ,<a> 标 记 是 超 链接 ,但 是 假如 没有 href 属性 , 它 仅 是 超 链 
接 的 一 个 占 位 符 。 


3.2.2 绝对 路 径 与 相对 路 径 


在 设 定 超级 链接 href 属性 值 之 前 ,首先 了 解 网 站 中 的 文档 路 径 ,文档 路 径 分 为 绝对 路 
径 . 根 目录 相对 路 径 及 文档 相对 路 径 3 种 类 型 。 

1. 绝对 路 径 

绝对 路 径 是 包含 服务 器 协议 (对 于 网 页 来 说 通常 是 http:// 或 ftp://) 的 完全 路 径 ,绝对 
路 径 包 含 的 是 精确 地 址 而 不 用 考虑 源 文件 的 位 置 。 但 是 如 果 目 标 文件 被 移动 , 则 链接 无 效 。 
创建 外 部 超 链接 时 必须 使 用 绝对 路 径 。 

绝对 路 径 是 指 资源 的 完整 地 址 ,包括 URL 的 3 个 部 分 ,形式 如 下 。 


协议 :// 计 算 机 /文档 名 


例如 , http://news. sohu. com/20110721/n314120792. shtml 就 是 绝对 路 径 .协议 为 
http ,访问 news. sohu. com 主机 20110721 目录 下 的 n314120792. shtml 文件 。 

如 果 创 建 外 部 链接 ,在 对 < a > 标记 的 href 属性 值 的 设 定时 ,使 该 值 所 代表 的 值 为 绝对 
路 径 , 这 样 在 单 击 该 链接 时 就 会 链接 到 网 站 的 外 部 。 

通过 外 部 链接 可 以 使 链接 跳 转 到 网 站 外 部 某 个 指定 的 目标 ,该 目标 可 以 是 一 个 网 页 ,也 
可 以 发 送 邮件 到 一 个 E-mail 地 址 ,或 者 访问 某 个 ftp 资源 。href 属性 的 一 些 常 见 选用 值 和 
含义 如 表 3-1 所 示 。 





表 3-1 href 属性 常见 的 选用 值 和 含义 





服务 文字 描述 URL 形式 
WWW 新 浪 网 < a href 二 "http://www. sina. com. cn"< 新 浪 </a> 
FTP 清华 大 学 ftp 服务 器 < a href 二 " ftp://ftp. tsinghua. edu. cn "< 清华 大 学 </a> 
E-mail 邮件 地 址 <a href 一 "mailto:itwangwu@sina. com"< 写 信 </a> 


超级 链接 


才 w 趴 
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【 例 3-2】 一 个 外 部 链接 的 实例 。 


<! -- 程序 3-2-> 
<html> 
<head> 
<title> 绝 对 路 径 与 外 部 链接 </title> 国字 二 
Ed 视频 讲解 
<body> 
<a href = " http://news. sohu.com/20110721/n314153042. shtml "> 搜狐 新 闻 内 容 </a> 
</body> 
</html > 





程序 3-2 是 一 个 外 部 链接 的 例子 ,该 链接 的 目标 是 一 个 绝对 路 径 , URL 中 协议 为 http， 
链接 目标 为 news. sohu. com 主机 20110721 目录 下 的 n314153042. shtml 文件 , 当 单 击 该 链 
接 链接 到 外 部 的 搜狐 网 站 的 该 文件 ,效果 如 图 3-4 所 示 。 
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图 3-4 绝对 路 径 与 外 部 链接 效果 


2. 相对 路 径 

相对 路 径 又 分 为 根 目 录 相 对 路 径 与 文档 相对 路 径 两 种 。 相 对 路 径 适 合 于 创建 网 站 的 内 
部 链接 ,一 个 相对 路 径 不 包括 协议 和 主机 信息 ,因为 它 的 路 径 与 当前 文档 的 访问 协议 和 主机 
相同 ,甚至 有 相同 的 目录 路 径 , 所 以 通常 只 包含 文件 夹 名 和 文件 名 ,有 时 甚至 只 有 文件 名 。 

(1) 根 目录 相对 路 径 : 是 从 当前 站 点 的 根 目 录 开 始 的 路 径 。 站 点 上 所 有 可 公开 的 文件 
都 存放 在 站 点 的 根 目 录 下 。 与 根 目录 相对 的 路 径 使 用 斜 杠 以 告诉 服务 器 从 根 目录 开始 。 

例如 ,如 果 一 个 站 点 的 根 目录 在 D:\Program Files\ Apache Software Foundation\ 
Tomcat 6. 0\webapps\ROOT 下 ,ROOT 目录 下 存在 文件 31. html 文件 和 子 目 录 part3 ,在 
part3 下 存在 子 目 录 1, 子 目录 1 下 存在 文件 32. html, 文 件 32. html 中 有 链接 < a href 一 
"\31. html"> 访 问 文件 31. html </a>, 那 么 单 击 该 文件 显示 的 链接 就 会 跳 转 到 文件 31. html。 

(2) 文档 相对 路 径 : 指 与 当前 文档 所 在 的 文件 夹 相 对 的 路 径 。 这 种 路 径 通 常 是 最 简单 
的 路 径 ,可 以 用 来 链接 和 当前 文档 处 于 同一 文件 夹 下 的 文档 。 下 面 举例 说 明 。 

如 果 链 接 到 同一 目录 下 的 文件 part3. html, 只 需要 指定 链接 文件 的 名 称 即 可 href 一 
"part3. html" 。 

如 果 要 链接 上 一 级 目录 中 的 文件 part3. html, 则 要 输入 “../” 然 后 再 输入 文件 名 href 一 
"ypart3. html”. 





如 果 要 链接 上 两 级 目录 中 的 文件 part3. html, 则 要 输入 “../../” 然 后 再 输入 文件 名 
href="../.. /part3. html"。 

如 果 链 接 到 当前 目录 的 下 一 级 子 目录 web 下 的 文件 part3. html, 则 要 输入 目录 名 
“web/ ”然后 再 输入 文件 名 href 王 "web/part3. html" 。 

【 例 3-3】 一 个 内 部 链接 的 实例 。 


<! 一 - 程序 3-3 --> 

<html> 

<head> 

<title> 相 对 路 径 与 内 部 链接 </title> 

</head> 

<body> 

<a href = "程序 3- 2. htm1"> 链 接 到 程序 3-2</a><br> 

</body> 

</html > 





程序 3-3 在 网 页 上 面 显示 一 个 链接 “链接 到 程序 3-2”, 当 单 击 该 链接 后 ,网 页 显示 的 内 
容 跳 转 到 同 目录 的 程序 3-2. html。 

页 面 显示 效果 如 图 3-5 所 示 。 

单 击 “ 链 接 到 程序 3-2” 链 接 , 显 示 的 内 容 跳 转 到 网 站 内 部 的 程序 3-2. html, 显 示 效 果 如 
图 3-6 所 示 。 

















习 相 对 路 从 号 内 部 链接 - Microsoft Interne.…. = 可 久 3 加 对 路 径 与 外 部 链接 -Nierosoft Interne… [2 回 区 
文件 久 贺 (E) ”查看 收藏 和 ) 工具 D 帮助 ”局 文件 (E) 编辑 (E) 查看 WW 收藏 W 工具 D 得 助 ” 局 


Ou-.©O.BBOPm @Aaea- 日 - 国 国 的 户 虹 


地 址 (0) | 本 Gtwebtpart3i 程 序 33html 。 弟 | 园 竺 到 锯 接 地 址 (D) | 入] Gwebipart3 程 序 3.2.html 。 关 | 国 转 到 “ 铸 接 





国 fle: 1/6:/web/part3l 


图 3-5 相对 路 径 和 内 部 链接 显示 效果 图 3-6 ”内 部 链接 目标 显示 效果 


3.2.3 target 属性 


<a> 标 记 的 target 属性 规定 在 何 处 打开 链接 文档 。 如 果 在 一 个 < a > 标记 内 包含 一 个 
target 属性 ,浏览 器 将 会 载 人 和 显示 用 这 个 标记 的 href 属性 命名 的 、 名 称 与 这 个 目标 吻合 的 
框架 或 者 窗口 中 的 文档 。 如 果 这 个 指定 名 称 或 id 的 框架 或 者 窗口 不 存在 ,浏览 器 将 打开 一 
个 新 的 窗口 ,给 这 个 窗口 一 个 指定 的 标记 ,然后 将 新 的 文档 载 人 这 个 窗口 。 

基本 语法 : 

















<a target= "value"> 


超级 链接 
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target 属性 值 及 其 含义 如 表 3-2 所 示 。 
表 3-2 target 属性 值 及 其 含义 





属性 值 描述 
_blank 在 新 窗口 中 打开 被 链接 文档 
_self( 默 认 ) 在 相同 的 框架 中 打开 被 链接 文档 
_parent 在 父 框架 集中 打开 被 链接 文档 
_top 在 整个 窗口 中 打开 被 链接 文档 
framename 在 指定 的 框架 中 打开 被 链接 文档 
属性 值 详解 如 下 。 





_blank: 浏览 器 总 在 一 个 新 打开 、 未 命名 的 窗口 中 载 人 目标 文档 。 

_self: 这 个 目标 的 值 对 所 有 没有 指定 目标 的 < a > 标记 是 默认 目标 , 它 使 得 目标 文档 载 
人 并 显示 在 相同 的 框架 或 者 窗口 中 作为 源 文档 。 

_parent: 这 个 目标 使 得 文档 载 人 父 窗口 。 如 果 网 页 中 含有 框架 ,那么 _parent 就 是 指 包 
含 自己 的 父 框架 。 如 果 这 个 引用 是 在 窗口 或 者 在 顶级 框架 中 ,那么 它 与 目标 _self 等 效 。 

_top: 这 个 目标 使 得 文档 载 人 包含 这 个 超 链 接 的 窗口 ,用 _top 目标 将 会 清除 所 有 被 包 
含 的 框架 并 将 文档 载 人 整个 浏览 器 窗口 。 

提示 : 上 述 target 的 4 个 值 都 以 下 画 线 开始 。 任 何其 他 一 个 用 下 画 线 作为 开头 的 窗口 
或 者 目标 都 会 被 浏览 器 忽略 ,因此 ,不 要 将 下 画 线 作为 文档 中 定义 的 任何 框架 name 或 id 的 
第 一 个 字符 。 

framename 为 指定 的 框架 名 称 ,下 面 举例 说 明 其 用 法 。 

如 果 不 用 打开 一 个 完整 的 浏览 器 窗口 ,使 用 target 通常 的 方法 是 在 一 个 < frameset > 显 
示 中 将 超 链接 内 容 定向 到 一 个 或 者 多 个 框架 中 。 例 如 ,可 以 将 这 个 目录 网 页 放 入 一 个 带 有 
两 个 框架 文档 的 其 中 一 个 框架 中 ,并 用 这 个 相 邻 的 框架 来 显示 选 定 的 文档 : 


< frameset cols = "100, * "> 

<frame src= "toc. htm1"> 

< frame src = "pref. html" name = "content"> 
</frameset > 


当 浏 览 器 最 初 显 示 这 两 个 框架 时 ,左边 框架 包含 目录 .右边 框架 包含 前 言 。 
这 是 "toc. html" 的 源 代码 : 


目录 内 容 <br> 

<a href = "pref. html" target = "content"> 前 言 </a><br> 

<a href = "chapl. html" target = " content "> 第 一 章 </a><br> 
<a href = "chap2. htm1" target = ”content "> 第 二 章 </a><br> 
<a href = "chap3. html" target = " content "> 第 三 章 </a> 


请 注意 ,在 文档 toc. html 中 ,每 个 链接 的 target 值 都 是 content, 也 就 是 右边 的 框架 。 
当 用 户 从 左边 框架 中 的 目录 中 选择 一 个 链接 时 .浏览 器 会 将 这 个 关联 的 文档 载 人 并 显 
示 在 右边 的 content 框架 中 。 当 其 他 链接 被 选中 时 ,右边 框架 中 的 内 容 也 会 发 生变 化 ,而 左 


边框 架 始 终 保 持 不 变 。 
3.2.4 超级 链接 的 显示 效果 


默认 情况 下 ,超级 链接 的 颜色 ,未 被 访问 的 链接 带 有 下 画 线 而 且 是 蓝 色 的 ,已 被 访问 的 
链接 带 有 下 画 线 而 且 是 紫色 的 ,活动 链接 带 有 下 画 线 而 且 是 红色 的 。 要 改变 链接 颜色 ,可 以 
在 < body link 王 "颜色 ”vlink 王 "颜色 ”alink 王 "颜色 ”> 中 设置 ,link 为 未 被 访问 的 链接 颜 
色 ,vlink 为 已 被 访问 的 链接 颜色 ,alink 为 活动 链接 颜色 。 

【 例 3-4】 一 个 改变 超级 链接 颜色 的 实例 。 

默认 情况 下 ,未 被 访问 链接 显示 为 蓝 色 ,已 被 访 的 链接 显示 为 紫色 。 程 序 使 未 被 访问 的 
链接 显示 为 绿色 ,被 访问 的 链接 显示 为 红色 。 


a | 

<html> 

<head> 
<title > 链接 文字 颜色 </title> 

</head> 

<body link =" 提 O00FFO00" vlink=" 间 FF0000" alink=" 间 00FF00"> 
<a href = "http://www. sina. com. cn"> 访 问 过 的 链接 </a>< br > 
<a href = "http://www. sohu. com"> 未 访问 的 链接 </a> 

</body> 

</html > 





单 击 网 页 “访问 过 的 链接 ”后 ,访问 过 的 链接 颜色 为 红色 ,未 访问 的 链接 颜色 为 绿色 页 
面 ,网 页 显示 效果 如 图 3-7 所 示 。 
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图 3-7 改变 超级 链接 颜色 的 显示 效果 


3.3 常见 的 超级 链接 应 用 


本 节 介 绍 几 个 常见 的 链接 应 用 ,包括 图 像 链接 .下 载 链接 .邮件 链接 和 锚 点 链接 。 
3.3.1 图 像 链接 
不 只 是 文本 可 以 作为 超级 链接 ,指定 图 像 也 可 以 作为 超级 链接 。 


地 w 四 


超级 链接 
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基本 语法 : 


<a href = "url" target = "打开 目标 链接 的 窗口 ">< img src = "图 像 地 址 "></a> 


语法 解释 : 

(1) href: 图 像 链 接 的 目标 URL。 

(2) target: 用 于 指定 打开 链接 的 目标 窗口 ( 详 见 3. 2. 3 节 )。 

(3) <img >: 标记 img 用 于 指定 插入 到 网 页 的 图 像 , 属 性 src 的 值 为 插入 图 像 的 地 址 。 
【 例 3-5】 一 个 图 像 超 级 链接 的 例子 。 


<! -- 程序 3-5--> 
<html > 
<head> 
<title> 图 像 超 级 链接 </title> 
</head> 
<body> 
<a href = "http://www. baidu. com">< img src = "baidu. gif"” alt = "百度 "></a><br> 
</body> 
</html > 








显示 为 链接 的 图 像 是 和 网 页 同 目录 下 的 baidu. gif, 图 片 的 替换 文字 是 “百度 ”, 当 和 鼠标 
指针 移动 到 百度 图 像 的 上 方 时 ,窗口 下 面 的 状态 栏 显 示 链 接地 址 ,显示 效果 如 图 3-8 所 示 。 
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3-8 ”图 像 超级 链接 显示 效果 


3.3.2 下 载 链 接 


如 果 和 希望 制作 下 载 文件 的 链接 ,只 需 在 链接 地 址 处 输入 文件 所 在 的 位 置 即 可 。 当 浏览 
器 用 户 单 击 链接 后 ,浏览 器 会 自动 判断 文件 的 类 型 ,以 做 出 不 同情 况 的 处 理 。 
基本 语法 : 


<a href = "url"> 链 接 内 容 </a> 


语法 解释 : 


(1) href: 下 载 文件 的 地 址 可 以 是 绝对 路 径 或 相对 路 径 。 
(2) 文件 的 类 型 可 以 是 ZIP 文件 .RAR 文件 .PDF 文件 .可 执行 文件 。 
【 例 3-6】 一 个 下 载 链接 的 实例 。 


<!-- 程序 3-6--> 
< htm]l > 
<head> 
<title> 下 载 超级 链接 </title> 
</head> 
<body > 
<a href = "程序 3 - 5. rar"> 下 载 程序 3- 5 压缩 包 </a>< br> 
</body> 
</html > 





程序 3-6 的 超级 链接 href 值 是 一 个 压缩 文件 的 地 址 ,显示 效果 如 图 3-9 所 示 。 
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下 载 程 序 3-5 压 缩 包 


图 he:J//G:Jweblpart3/ 程 序 3.5.ar 





图 3-9 下 载 超级 链接 显示 效果 


当 单 击 “ 下 载 程序 3-5 压缩 包 ” 链 接 时 ,弹出 “文件 下 载 " 对 话 框 ,显示 效果 如 图 3-10 所 示 。 


文件 下 载 
您 想 打开 或 保存 此 文件 吗 ? 
名 称 。 程序 3.5.rar 


类 型 : WinRAR 压缩 包 , 248 字 节 
发 送 者 : G:\web\part3 


[ED ES ED 


回 打开 此 类 文件 之 前 总 是 询问 @) 





© We 





图 3-10 下 载 文 件 显示 效果 


3.3.3 邮件 链接 


如 果 希 望 网 页 浏览 者 向 某 个 地 址 发 送 E-mail, 只 要 浏览 者 单 击 E-mail 链接 ,就 会 在 浏 > 
览 端 自动 打开 浏览 器 默认 的 E-mail 处 理 程序 , 收 件 人 的 地 址 将 会 被 E-mail 超 链接 中 的 指定 | 章 
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地 址 自动 装 和 人 ,无须 浏览 者 输入 ,这 时 就 需要 创建 电子 邮件 链接 。 
基本 语法 : 


<a href = mailto:E- mail 地 址 1?cc= 抄 送 人 E-mail 地 址 &subject = 邮件 主题 &body = 邮件 正文 > 
描述 文字 </a> 
语法 解释 : 


(1) href 属性 值 必 须 以 mailto: 开头 ,表示 后 面 为 电子 邮件 链接 ,具体 的 值 为 电子 邮件 地 址 。 

(2) E-mail 链接 只 有 客户 端正 确 安装 了 电子 邮件 软件 (如 Outlook 或 Foxmail 等 ) 才 能 
正常 运行 。 

(3) 链接 地 址 后 可 以 添加 多 个 参数 ,参数 之 间 用 “& " 字 符 分 隔 。 电 子 邮 件 地 址 参数 及 
含义 如 表 3-3 所 示 。 

(4) 多 个 电子 邮件 地 址 之 间 用 “ ; ”分 隔 。 





表 3-3 电子 邮件 地 址 参数 及 含义 


参 数 说 明 
ce 电子 邮件 的 收 件 人 
subject 电子 邮件 的 主题 
body 电子 邮件 的 内 容 


【 例 3-7】 一 个 关于 电子 邮件 链接 的 实例 。 


<b== 7 入 扬 六 =7==> 

<html> 

<head> 
<title> 邮 件 超级 链接 </title> 

</head> 

<body> 





<a href = "mailto: itwangwu@ sina. com?cc = Tom&subject = 邮件 标题 &body= 邮件 内 容 "> 发 
送 电子 邮件 </a>< br > 

</body> 

</html > 





链接 显示 效果 如 图 3-11 所 示 。 
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3-11 邮件 超级 链接 显示 效果 


单 击 “ 发 送 电子 邮件 ”链接 后 ,打开 默认 的 邮件 软件 ,新 建 一 封 邮 件 ,主题 为 “邮件 标题 ”， 
抄 送 “Tom”, 内 容 为 “邮件 内 容 ”, 收 件 人 地 址 为 “itwangwu@sina. com”, 显示 效果 如 图 3-12 
所 示 。 


合 写 邮 件 (itwangwu@sina.com) 
邮件 (编辑 (查看 (插入 (0 格式 (P 选项 O) 工具 (D 


时 时 时 人 
收 件 人 :Jtwangwu@sina.com 
Ee 





抄 送 ; Tom 


主题 : 邮件 标题 





图 3-12 发 送 邮 件 显 示 效 果 


3.3.4 锚 点 链接 


锚 点 也 称 书签 ,用 来 标记 文档 中 的 特定 位 置 ,使 用 它 可 以 跳 转 到 当前 文档 或 其 他 文档 中 
的 标记 位 置 。 在 网 页 中 加 入 锚 点 包括 两 方面 的 工作 ,一 是 在 网 页 中 创建 锚 点 ,二 是 为 锚 点 建 
立 链 接 。 

在 一 些 内 容 很 多 的 网 页 中 ,设计 者 常常 在 该 网 页 的 开始 部 分 以 网 页 内 容 的 小 标题 作为 
超 链 接 。 当 浏览 者 单 击 网 页 开始 部 分 的 小 标题 时 ,网 页 将 跳 转 到 内 容 中 的 对 应 小 标题 上 , 免 
去 浏览 者 翻阅 网 页 寻找 信息 的 麻烦 。 其 实 , 这 是 在 网 页 中 的 小 标题 添加 了 锚 点 ,再 通过 对 锚 
点 的 链接 来 实现 的 。 

基本 语法 : 

(1) 在 同一 页 面 内 要 使 用 锚 点 链接 的 格式 : 


<a href = " 间 销 点 名 称 ”target = "窗口 名 称 "> 链接 标题 </a> 


(2) 在 不 同 页 面 之 间 要 使 用 锚 点 链接 的 格式 (在 不 同 页 面 中 链接 的 前 提 是 需要 指定 链 
接 的 页 面 地 址 和 链接 的 锚 点 名 称 ) : 


<ahref="URL 地 址 井 锚 点 名 称 " target= "窗口 名 称 "> 链接 标题 </a> 
以 上 两 种 书签 链接 形式 ,链接 到 的 目标 为 : 
<a name = " 锚 点 名 称 "> 链 接 内 容 </a>。 


语法 解释 : 
锚 点 链接 可 以 在 同一 页 面 内 链接 ,也 可 以 在 不 同 页 面 之 间 链 接 。 建 立 锚 点 链接 需要 两 
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个 步骤 : 建立 锚 点 和 为 锚 点 建立 链接 。 
(1) 建立 锚 点 。 选 择 一 个 目标 点 ,用 标记 < a > 标记 的 属性 name 的 值 来 确定 锚 点 的 
名 称 。 


<aname= " 锚 点 名 称 "> 链接 内 容 </a> 


在 命名 锚 点 时 ,必须 遵循 以 下 规定 。 

Q@ 只 能 使 用 字母 和 数字 , 锚 点 命名 不 支持 中 文 。 虽 然 在 插入 锚 点 对 话 框 中 能 输入 中 
文 , 但 在 “属性 ?面板 上 显示 的 则 是 一 堆 乱码 , 且 在 为 锚 点 添加 链接 时 ,也 无 法 工作 。 

@ 锚 点 名 称 的 第 1 个 字符 最 好 是 英文 字母 ,一 般 不 要 以 数字 作为 锚 点 名 称 的 开头 。 

@ 锚 点 名 称 区 别 英文 字母 的 大 小 写 。 

@ 锚 点 名 称 之 间 不 能 含有 空格 ,也 不 能 含有 特殊 字符 。 

(2) 链接 锚 点 。 创 建 锚 点 后 ,还 必须 链接 锚 点 。 选 择 想 要 链接 到 锚 点 的 文字 或 图 片 , 然 
后 按 下 面 的 方法 建立 链接 。 

Q@ 锚 点 和 锚 点 链接 在 同一 页 面 ,链接 形式 为 < a href 一 " 锚 点 名 称 "” target 一 "窗口 名 
称 "> 链 接 标 题 </a >。 

@ 锚 点 和 锚 点 链接 在 不 同 页 面 , 链 接 形式 为 < a href 二 "URL 地 址 # 锚 点 名 称 "target 一 
"窗口 名 称 "> 链 接 标题 </a > 

注意 ,不管 是 否 在 同一 页 面 , 锚 点 链接 的 href 属性 值 中 锚 点 名 称 前 都 要 加 上 “# ”字符 ， 
按照 上 述 步骤 构建 链接 后 , 单 击 锚 点 链接 就 会 跳 转 到 指定 锚 点 的 内 容 了 。 

【 例 3-8】 一 个 锚 点 链接 的 实例 。 





<! -- 程序 3-8--> 

< html > 

<head> 

<title > 锚 点 链接 </title> 

</head> 

< body > 

<a href = " 划 topic"> 链 接 到 页 内 标题 </a>< br> 
内 容 1。<br><br><br><br><br><br> 
内 容 2。<br><br><br><br><br><br> 





内 容 3。<br><br><br><br><br><br> 
<H3 ><a name = "topic"> 标 题 </a></H3 > 
内 容 4。<br><br><br><br><br><br> 
</body> 

</html > 


程序 在 页 面 内 部 定义 了 一 个 锚 点 “topic”, 在 页 面 上 部 建立 一 个 锚 点 链接 ,网 页 显示 效 
果 如 图 3-13 所 示 。 
单 击 该 锚 点 链接 ,显示 的 内 容 跳 转 到 锚 点 处 ,网 页 显示 效果 如 图 3-14 所 示 。 
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图 3-14 显示 锚 点 处 内 容 


3.4 图 像 映射 


图 像 既 可 以 作为 超 链接 的 源 ,也 可 以 作为 超 链 接 的 目标 。 图 像 映射 是 指 在 同一 幅 图 中 


定义 若干 区 域 .不 同 区 域 对 应 不 同 的 超 链接 , 单 击 不 同 区 域 可 跳 转 到 相应 页 面 。 














其 实 ,图 像 


映射 就 是 将 图 像 内 的 区 域 与 一 系列 URL 链接 起 来 了 ,从 而 单 击 特定 区 域 就 会 把 用 户 带 到 


相应 的 内 容 。 


本 节 所 述 的 是 客户 端 图 像 映射 ,这 和 服务 器 端 图 像 映 射 相 比 ,运行 速度 更 快 。 











如 果 要 建立 客户 端 图 像 映射 包括 定义 映射 图 和 使 用 映射 图 。 
定义 映射 图 : < map > 标记 符 和 < area > 标记 符 。 
使 用 映射 图 : < img usemap 一 车 映射 图 名 称 >。 























3.4.1 <map> 标 记 


定义 映射 区 域 应 使 用 < map > 标记 ,在 < map ></map > 之 间 添 加 映射 区 域 信息 。 


基本 语法 : 


<map name = "namemap" id=" namemap "></map> 
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语法 解释 : 

(1) name 和 id 属性 规定 了 映射 的 名 称 和 标识 符 。 

(2) <img > 中 的 usemap 属性 可 引用 < map > 中 的 id 或 name 属性 (取决 于 浏览 器 ) ,所 
以 应 同时 向 < map > 添加 id 和 name 属性 。 


3.4.2 <area> 标 记 


图 像 映射 指 的 是 带 有 可 单 击 区 域 的 图 像 ,< area > 标记 定义 图 像 映射 中 的 区 域 。area 元 
素 总 是 嵌 套 在 < map > 标记 中 。 
基本 语法 : 





<area shape = "形状 " coords = "坐标 " href = "url" alt = "替换 文本 " /> 


语法 解释 : 

(1) alt 属性 定义 此 区 域 的 替换 文本 。 

(2) coords 定义 可 单 击 区 域 ( 对 鼠标 敏感 的 区 域 ) 的 坐标 。 

(3) href 定义 此 区 域 的 目标 URL。 

(4) shape 定义 区 域 的 形状 ,可 选 值 default( 全 部 区 域 ) 、rectangle( 和 矩形 ) ,circle( 圆 形 ) 
和 polygon( 多 边 形 ) 。 

下 面 详细 解释 属性 coords 和 shape 的 用 法 。 

< area > 标记 的 coords 属性 定义 了 客户 端 图 像 映射 中 对 鼠标 敏感 的 区 域 的 坐标 。 坐 标 
的 数字 及 其 含义 取决 于 shape 属性 中 决定 的 区 域 形状 。 可 以 将 客户 端 图 像 映射 中 的 超 链接 
区 域 定义 为 矩形 、 圆 形 或 多 边 形 等 。 

下 面 列 出 了 每 种 形状 的 适当 值 : 

(1) 圆 形 ; shape 二 "circle" ,coords 二 "x,y,z" 

这 里 的 x 和 y 定 义 了 圆心 的 位 置 ("0,0" 是 图 像 左 上 角 的 坐标 ),r 是 以 像素 为 单位 的 圆 
形 半 径 。 

(2) 多 边 形 : shape 一 "polygon" ,coords 一 "xl,yl,.x2.y2,.x3.y3...." 

每 一 对 "x,y" 坐 标 都 定义 了 多 边 形 的 一 个 项 点 ("0,0" 是 图 像 左 上 角 的 坐标 )。 定 义 三 
角形 至 少 需要 三 组 坐标 ; 高 纬 多 边 形 则 需要 更 多 数量 的 顶点 。 

多 边 形 会 自动 封闭 ,因此 在 列表 的 结尾 不 需要 重复 第 一 个 坐标 来 闭合 整个 区 域 。 

(3) 矩形 : shape 王 "rectangle" ,coords 一 "xl ,yl.x2.y2” 

第 一 个 坐标 是 矩形 的 一 个 角 的 顶点 坐标 , 另 一 对 坐标 是 对 角 的 顶点 坐标 ,"0,0" 是 图 像 
左上 角 的 坐标 。 注 意 ,定义 和 矩形 实际 上 是 定义 带 有 4 个 项 点 的 多 边 形 的 一 种 简化 方法 。 


3.4.3 <img> 标 记 的 usemap 属性 


< img > 标记 的 usemap 属性 将 图 像 定义 为 客户 端 图 像 映射 。usemap 属性 与 map 元 素 
的 name 属性 相关 联 , 它 建立 了 图 像 与 映射 之 间 的 关系 。 

usemap 属性 提供 了 一 种 “客户 端 " 的 图 像 映 射 机 制 ,有 效 地 消除 了 服务 器 端 对 鼠标 坐标 
的 处 理 , 以 及 由 此 带 来 的 网 络 延迟 问题 。 通 过 特殊 的 < map > 和 < area > 标记 ,HTML 创作 者 
可 以 提供 一 个 描述 usemap 图 像 中 超 链接 敏感 区 域 坐标 的 映射 ,这 个 映射 同时 包含 相应 的 



































超 链 接 URL。usemap 属性 的 值 是 一 个 URL, 它 指向 特殊 的 < map > 区 域 。 用 户 计算 机 上 的 
浏览 器 将 把 鼠标 在 图 像 上 单 击 时 的 坐标 转换 成 特定 的 行为 ,包括 加 载 和 显示 另外 一 个 文档 。 
【 例 3-9】 一 个 图 像 映射 的 实例 。 


























> 
<html> 

<head> 
<title> 图 像 映 射 </title> 
0 [Bre 
<body> i 

<p> 图 像 映射 实例 </p> 让 
<p> 

< img src = "baidu. gif" alt = "百度 " width = "270" height = "129" border = "0" usemap = " 井 Map"> 
<map name = "Map"> 

<area shape = "rectangle" coords = "164, 51, 230, 92" href = "http://www. baidu. com" alt = "百度 
首页 "> 

</map> 

</p> 

</body> 

</html > 





程序 3-9 定义 了 一 个 图 像 映射 ,热点 区 域 为 图 像 中 包含 “百度 "两 个 字 的 矩形 区 域 , 显 示 
效果 如 图 3-15 所 示 。 


马 图 称 映 射 - Microsoft Internet Explorer 
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3-15 图 像 映 射 显示 效果 


在 图 像 中 ”百度 "两 个 字 范 围 内 单 击 ,显示 就 会 跳 转 到 百度 首页 ,在 图 像 其 他 区 域 单 
不 跳 转 。 
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3.5 上 机 练习 与 指导 


3.5.1 锚 点 链接 的 应 用 


【 例 3-10】 锚 点 链接 的 应 用 方法 。 这 里 综合 了 链接 页 面 内 部 锚 点 和 站 点 内 其 他 页 面 
内 锚 点 的 应 用 。 
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= 程序 3 一 10== 三 

<html> 

<head> 

<title> 锚 点 链接 应 用 </title> 

</head> 

<body > 

链接 页 面 外 部 锚 点 :<br> 

<ahref = "程序 3- 10a.html 间 topic"> 程 序 3- 10a. htm 中 的 标题 </a>< br> 
链接 页 面 内 部 锚 点 : <br> 

<a href = " 间 topic1"> 页 面 内 标题 1</a><br> 
<a href = " 间 topic2"> 页 面 内 标题 2</a><br> 
<a href =" 井 topic3"> 页 面 内 标题 3</a><br> 
<a href =" 间 topic4"> 页 面 内 标题 4</a><br> 


<H3 ><a name = "topicl"> 标 题 1</a></H3 > 
内 容 1。<br><br><br><br><br><br> 
<H3 ><a name = "topic2"> 标 题 2 </a></H3 > 
内 容 2。<br><br><br><br><br><br> 
< 了 ><a name = "topic3"> 标 题 3 </a></H3 > 
内 容 3。<br><br><br><br><br><br> 
<H3 ><a name = "topic4"> 标 题 4</a></H3 > 
内 容 4。<br><br><br><br><br><br> 
</body> 

</html > 


程序 3-10 在 页 面 内 部 定义 了 4 个 锚 点 ,页 面 的 上 部 创建 了 一 个 连接 3-10a. html 锚 点 
topic 的 链接 和 4 个 页 面 内 部 锚 点 的 链接 。 在 程序 3-10a. html 中 定义 了 一 个 锚 点 。 


<! -- 程序 3-10a --> 

< html > 

<head> 
<title> 锚 点 链接 应 用 </title> 
</head> 

<body> 

其 他 内 容 
<br><br><br><br><br><br> 
<br><br><br><br><br><br> 
< 了 H3 > 位 于 程序 3- 10a 中 .<br> 
<a name = "topic"> 标 题 </a></H3 > 
内 容 。 

</body> 

</html > 


程序 3-10. html 页 面 显示 效果 如 图 3-16 所 示 。 

单 击 “ 页 面 内 标题 1 链接 ,显示 跳 转 到 页 面 内 锚 点 topicl 处 。 页 面 显 示 效 果 如 图 3-17 
所 示 。 

单 击 图 3-16 中 “程序 3-10a. html 中 的 标题 "链接 ,显示 程序 3-10a 中 锚 点 topic 处 的 内 
容 。 页 面 显示 效果 如 图 3-18 所 示 。 














下 锚 点 链接 应 用 - 了 icrosoft Internet Exzplorer 
文件 人 ) ”编辑 到) 查看) 收 蕊 人 ) 工具 QD) 帮助 人 0 


Ga -昌国 国 的 Ps 责 wex @ | 全 -加 局- 


者 | E:\ 其 础 与 上 机 指导 \html+jawasceript+ess\webvweb\part3\ 程 序 3-10.h 图 





链接 页 面 外 部 锚 点 ， 
3-10a. htm 中 的 标题 
面 内 部 锚 点 ， 


及 te 
由 面 内 标题 2 
贝 面 内 标题 3 
贝 面 内 标题 4 
标题 1 
内 容 1。 














图 3-16 程序 3-10. html 页 面 显示 效果 


忆 锚 点 链接 应 用 - Wicr6soft Internet EXPOTer 
文件 电 ”编辑 (E) ”查看 (Y) 收 阅 多 ”工具 ID。 才 助 (中 


@sm- 昌 -四 加 的 P 业 认 tax 轿 


地 址 (0) | 彼 fie:jl/G:jweblpart3| 程 序 3-10.html#topr! 加] 园 转 到 :链接 
标题 1 


内 容 1。 








标题 2 
御 正在 从 以 下 站 点 下 载 : fle:jiG:Wwet 





图 3-17 程序 3-10a. html 页 面 显示 效果 
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当 辆 点 链接 应 用 - Microsoft Internet Explorer 
文件 ”编辑 (E) ”查看 WW 收 送 (名 ”工具 (DD 帮助 (中 


Aa-©- 因 国 @ Pm wx @ 


地 址 (D) | 倒 fie:j/ia:jweblpart3 程 序 3-10a.html#tope 。 因 | 园 3 : 链 廊 ” 











位 于 程序 3-10a 中 。 
标题 








3-18 单 击 锚 点 链接 后 页 面 显 示 效 果 














5.2 图 像 映射 的 应 用 

【 例 3-11】 一 个 图 像 映射 的 综合 实例 。 

在 图 像 中 定义 了 3 个 热点 区 域 “ 太 阳 ? 所 在 区 域 为 矩形 ,金星 ”和 "水 星 ” 所 在 区 域 为 
形 。 

<! -- 程序 3-11 --> 

< html > 

<body> 

<p> 图 像 映射 例子 </p> 


< img src = "planets. jpg" border = "0" usemap = "#planetmap" alt = "太阳 系 " /> 

<map name= "planetmap" id= "planetmap"> 

< area shape = "circle" coords = "180, 139, 14" href = "venus.html" target = "_blank" alt = " 金 
星 ”/> 

<area shape = "circle" coords = "129,161,10" href = "mercur.html" target = "_blank" alt= "水 
| 

<area shape = "rectangle" coords = "0,0,110,260" href = "sun. html" target ="_blank" alt = " 太 
用 /> 


</map> 
<p><b> 单 击 太阳 或 行星 可 以 查看 对 应 的 图 片 。</p> 
</body> 
</html > 





网 页 显示 效果 如 图 3-19 所 示 。 
如 果 在 太阳 所 在 区 域 单 击 ,显示 sun. html; 如 果 在 金星 所 在 区 域 单 击 ,显示 venus. 











html; 如 果 在 水 星 所 在 区 域 单 击 , 显 示 mercur. html。 在 太阳 所 在 区 域 单 击 的 显示 效果 如 


图 





3-20 所 示 。 


于 E:\ 基 础 与 上 机 指导 \htal+javascript+cssvwe--- 于 上 癌 | 区 | 
编辑 FE) 查看 GD) 收 宰 人 ) 工具 CO) 帮助 0) [3 


© - 国 国 的 Ps Kear 加“ 





) | 乔 z:\ 玛 础 与 上 机 指导 \htnl+javaseripttessvwe 贺 | 园区 到 入 这 


单 击 太阳 或 行星 可 以 查看 对 应 的 图 片 。 





ETET 





图 3-19 图 像 映射 显示 效果 


DG\Wweblpart3lsun.html- Microsoft Int... =" XX 
文件 编辑 (E) 查看 W 收藏) I 具 D ” 大 


@a-@- 国 国 的 | 万 本 
地 址 (D) | 倒 Gilweblpart3isun.html 因 | 加 到 “名 接 








图 3-20 ”sun. html 显示 效果 


3.6 本 章 习 题 


、 选 择 题 
. 超级 链接 的 提示 文字 ,应 该 设置 < a > 标记 的 ( ) 属 性 值 。 

A. href B. title C. id D. target 
. 通过 < a > 标记 的 ( ) 属 性 值 ,可 以 控制 链接 目标 打开 的 窗口 。 

A. href B. title C. id D. target 
.以 下 标记 中 ,( ) 是 用 于 设置 超级 链接 的 标记 。 

A. <title> B. < caption > C. <a> D. <link> 


超级 链 共 


地 w 趴 
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二 、 填空 题 


1. 按照 链接 路 径 的 不 同 ,网 页 中 超 链 接 一 般 分 为 内 部 链接 、 和 外 部 链接 3 种 


类 型 。 
2. 绝对 路 径 是 包含 (对 于 网 页 来 说 通常 是 http:// 或 ftp://) 的 完 
对 路 径 包 含 的 是 精确 地 址 而 不 用 考虑 源 文 件 的 位 置 。 











全 路 径 , 绝 





3. 如 果 要 链接 上 一 级 目录 中 的 文件 , 则 在 设置 < a > 标记 的 href 属性 值 时 ,应 先 输入 
” ”然后 再 输入 文件 名 。 

4. 默认 情况 下 ,超级 链接 的 颜色 ,未 被 访问 的 链接 带 有 下 画 线 而 且 是 蓝 色 的 ,已 被 访问 
的 链接 带 有 下 画 线 而 且 是 色 的 。 

5. 创建 邮件 链接 时 ,href 属性 值 必 须 以 开头 ,表示 后 面 为 电子 邮件 链接 ,具体 
的 值 为 电子 邮件 地 址 。 

6， 锚 点 也 称 书签 ,用 来 标记 文档 中 的 ,使 用 它 可 以 跳 转 到 当前 文档 或 其 他 文 
档 中 的 标记 位 置 。 

7. 图 像 映射 指 的 是 带 有 可 单 击 区 域 的 图 像 ， 标记 定义 图 像 映射 中 的 区 域 。 

8. 在 创建 电子 邮件 链接 时 ,如 果 电 子 邮 件 地 址 是 cai8net@sohu. com, 那 么 正确 的 链接 





代码 是 。 





第 4 章 用 HTML 布局 网 页 


在 进行 网 页 设计 时 ,要 对 网 页 进行 布局 , 即 决定 网 页 包含 哪些 组 成 部 分 ,以 及 每 个 组 成 
部 分 显示 的 位 置 及 尺寸 。 表 格 和 框架 可 以 精确 地 控制 网 页 各 个 元 素 在 网 页 中 的 位 置 ,是 网 
页 制作 中 常见 的 网 页 布局 工具 。 

本 章 主要 内 容 如 下 。 














。 创建 表格 。 

。 表格 属性 设置 。 

。 使 用 表格 布局 网 页 。 
。 创建 框架 。 

。 框架 控 制 。 


。 使 用 框架 布局 网 页 。 


4.1 创建 表格 


表格 在 网 站 应 用 中 非常 广泛 ,几乎 所 有 的 HTML 页 面 中 都 或 多 或 少 地 采用 表格 ,表格 
可 以 方便 灵活 地 实现 对 网 页 的 排版 ,可 以 把 相互 关联 的 信息 元 素 集中 定位 ,使 浏览 页 面 的 人 
一 目 了 然 ,赏心悦目 。 要 制作 好 网 页 ,就 要 学 好 表格 ,熟练 掌握 和 运用 表格 的 各 种 属性 。 


4.1.1 表格 标记 


表格 由 < table > 标记 来 定义 。 每 个 表格 均 有 若干 行 (由 < tr > 标记 定义 ) ,每 个 表格 可 以 
定义 第 一 行 的 单元 格 为 表 头 (由 < th > 标记 定义 ) ,其 余 每 行 被 分 割 为 若干 单元 格 ( 由 < td > 标 
记 定义 )。 字 母 td 指 表格 数据 (table data) , 即 数据 单元 格 的 内 容 。 数 据 单元 格 可 以 包含 文 
本 ,图 片 , 列 表 、 段 落 .表单 水平线 .表格 等 。 

基本 语法 : 


<table> 
<tr> 
<th> headl </th> 
<th> head2 </th> 
</tr> 
<tr> 
<td> row1, cell 1</td> 
<td>row1, cell 2</td> 
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</tr> 

Er 
<td> row 2, cell 1</td> 
<td> row 2, cell 2</td> 


</tr> 
</table> 


语法 解释 : 
(1) < table > 定义 表格 ,</table > 代表 表格 结束 ,一 个 表格 中 可 以 有 多 个 < tr >。 
(2) < tr > 在 表格 标记 范围 内 ,代表 行 开始 ,</tr > 代表 行 结束 ,一 行 中 可 以 有 多 个 < th > 


或 < td >。 
(3) < th > 定义 表 头 , 表 头 是 指 表格 的 第 一 行 , 文 字样 式 为 居中 、 加 粗 显 示 。</th > 代表 
表 头 结束 。 


(4) < td > 定义 单元 格 ,</td > 代表 单元 格 结束 。 
【 例 4-1】 一 个 简单 的 表格 实例 。 


<! -- 程序 4-1--> 
<html> 
<head> 
<title> 一 个 简单 的 表格 </title> 
</head> 
<body> 
<table border = "1"> 
<tr> 
<th> 表 头 1</th> 
<th> 表 头 2</th> 
<th> 表 头 3</th> 
</tr> 
< 
<td> 内 容 11 </td> 
<td> 内 容 12 </td> 
<td> 内 容 13 </td> 
</tr> 
<tr> 
<td> 内 容 21 </td> 
<td> 内 容 22 </td> 
<td> 内 容 23 </td> 
</tr > 
</table> 
</body> 
</htm]l > 





程序 4-1 定义 了 一 个 3 行 3 列 的 表格 ; < table > 标记 中 border 属性 值 为 1. 表 示 表 格 边 
框 宽度 为 一 个 像素 ; 第 一 行为 标题 行 . 网 页 显示 效果 如 图 4-1 所 示 。 


当 一 个 简单 的 表格 - Wicrosoft Internet EX … 二 器 文 
文件 口 ”编辑 (E) 查看 收藏 四 I 具 D 融 ” 雇 


@ 右 -日 -四 回信 记 时 





| 表 头 1 | 表 头 2 | 表 头 3 
内 容 11 | 内 容 12 | 内 容 13 
内 容 21 | 内 容 22 | 内 容 23 





4-1 表格 的 网 页 显示 效果 


专家 点 拨 : 在 HTML5 中 ,< table > 标记 仅 支持 "border" 属 性 ,并 且 只 允许 使 用 值 "" 
或 "1"。 不 支持 < table > 标记 HTML4.01 中 的 其 他 属性 。 


4.1.2 表格 标题 


表格 标题 就 是 对 表格 内 容 的 简单 说 明 ,用 < caption > 标记 来 定义 。 
基本 语法 ， 


< caption> 表 格 标题 </caption> 


语法 解释 : 

< caption > 标记 必须 紧 随 < table > 标记 之 后 。 只 能 对 每 个 表格 定义 一 个 标题 。 通 常 这 
个 标题 会 被 居中 于 表格 之 上 ,是 对 表格 内 容 的 简略 说 明 。 

【 例 4-2】 一 个 表格 标题 的 实例 。 


< 程序 全 二 2 二 三 
< html > 
<head> 
<title> 表 格 标题 </title> 
</head> 
< body> 
<table border = "1"> 
<caption > 表格 标题 示例 </caption > 
<tr> 
<td> 内 容 11</td>< td> 内 容 12</td>< td> 内 容 13 </td> 
</tr> 
<tr> 
<td> 内 容 21 </td>< td> 内 容 22</td>< td> 内 容 23 </td> 
</tr> 
</table> 
</body> 
</html> 





程序 4-2 定义 了 表格 的 标题 为 “表格 标题 示例 ”, 文 本 显示 在 表格 的 上 方 ,网 页 显示 效果 
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如 图 4-2 所 示 。 





李 表 格 标题 - Wicrosoft Internet Explorer eh < 
文件 ”编辑 (E) 查看 WW) 收 着 I 具 D 带 ” 雇 


@am-©- 四 OP “ 
er DE 





表格 标题 示例 


| 内 容 11 | 内 容 12 | 内 容 13 
| 内 容 21 | 内 容 22 内容 23 





图 4-2 表格 标题 的 网 页 显示 效果 


专家 点 拨 : 在 HTML4.01 中 不 现成 使 用 align 属性 ,在 HTML5 中 不 支持 该 属性 ,使 用 
CSS 替代 它 。 


4.1.3 划分 表格 结构 


创建 表格 时 ,如 果 和 希望 拥有 一 个 表 头 行 、 一 些 带 有 数据 的 行 以 及 位 于 底部 的 一 个 总 计 
行 ,就 需要 一 些 标记 来 定义 。< thead > 标记 用 于 对 HTML 表格 中 的 表 头 内 容 进行 分 组 ， 
< tfoot > 标记 用 于 对 HTML 表格 中 的 总 计 行 (页 脚 ) 内 容 进行 分 组 ,< tbody > 标记 用 于 对 
HTML 表格 中 的 数据 主体 内 容 进 行 分 组 。 

基本 语法 : 





<table> 
<thead> 
</thead> 
<tfoot> 
</tfoot> 
<tbody> 
</tbody> 

</table> 


语法 解释 : 

(1) < thead > 标记 定义 表格 的 表 头 ,用 于 组 合 HTML 表格 的 表 头 内 容 。 

(2) < tfoot > 标记 定义 表格 的 页 脚 (脚注 或 表 注 ) ,用 于 组 合 HTML 表格 中 的 表 注 内 容 。 

(3) < tbody > 标记 定义 表格 主体 (正文 ) ,用 于 组 合 HTML 表格 的 主体 内 容 。 

(4) 如 果 使 用 < thead >、< tfoot > 及 < tbody > 标记 划分 表格 ,就 必须 使 用 全 部 的 元 素 。 
它们 的 出 现 次 序 为 : < thead >、< tfoot >、< tbody >, 这 样 浏览 器 就 可 以 在 收 到 所 有 数据 前 呈 
现 页 脚 了 ,必须 在 < table > 标记 范围 内 部 使 用 这 些 标 记 。 

【 例 4-3】 一 个 划分 表格 结构 的 实例 。 


二 各 序 和 3 
<html> 


< head> 


<title> 表 格 结构 </title> 


</head> 
<body> 


<table border = "1"> 


<thead> 
<tr> 


<th> 月 份 </th> 
<th> 存 款 </th> 


</tr> 
</thead> 
<tfoot> 

< 


<td> 总 计 </td> 


<td>180 元 </td> 


</tr> 
</tfoot> 
<tbody> 

<tr> 


<td> 一 月 </td> 


<td> 100 元 </td> 


</tr> 
<tr> 


<td> 二 月 </td> 


<td> 80 元 </td> 


</tr> 

</tbody> 
</table> 
</body> 
</html > 





虽然 < tfoot > 标记 的 内 容 定 义 在 < tbody > 标记 的 内 容 前 面 , 但 是 显示 时 却 位 于 表格 最 





下 方 , 网 页 显示 效果 如 





图 








4-3 所 示 。 
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月 盆 | 存款 
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图 4-3 划分 表格 结构 的 网 页 显示 效果 
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4.2 表格 属性 设置 


本 节 介绍 表格 、 行 和 单元 格 标记 中 常用 属性 的 设置 ,控制 表格 的 显示 效果 。 
4.2.1 <table> 标 记 属 性 


在 HTML5 中 ,< table > 标记 仅 支 持 border 属性 ,并 且 只 允许 使 用 值 " "或 "1"。 不 支持 
< table > 标记 HTML4. 01 中 的 其 他 属性 。 


4.2.2 <tr> 标 记 属 性 
<tr> 标 记 定 义 HTML 表格 中 的 行 。 在 HTML5 中 ,不 支持 < tr > 标记 的 任何 属性 。 
4.2.3 <td> 标 记 属 性 


<td> 标 记 中 的 属性 用 于 设置 表格 中 的 标准 单元 格 的 一 些 特性 。 在 HTML5 中 , 仅 支 
持 colspan 和 rowspan 属性 。 
< td > 标记 常用 属性 及 其 描述 如 表 4-1 所 示 。 


表 4-1 <td> 标 记 常用 属性 及 其 描述 





属 性 描 述 
colspan 规定 单元 格 可 横 跨 的 列 数 
rowspan 规定 单元 格 可 横 跨 的 行 数 


下 面 详细 介绍 单元 格 跨 列 和 跨行 属性 设置 的 方法 。 

1. 设置 单元 格 跨 列 

colspan 属性 用 于 设置 表格 中 某 一 单元 格 跨 几 个 列 进 行 合并 (横向 合并 ) 。 
基本 语法 : 


<tdcolspan =""> 


语法 解释 : 

colspan 的 值 就 是 单元 格 进 行 横向 合并 时 所 跨 的 列 数 ,如 某 一 个 单元 格 与 其 右面 两 个 单 
元 格 合并 ,colspan 的 值 设 为 3。 

【 例 4-4】 一 个 设置 表格 单元 格 跨 列 的 实例 。 





< -= 程序 4 下 一 > 

< htm]l > 

<head> 

<title> 表 格 跨 列 </title> 
</head> 

<body> 

<table border = "1" > 





<tr> 
<td> gnbsp;</td> 
<td> gnbsp;</td> 
<td> gnbsp;</td> 
<td> gnbsp;</td> 
</tr> 
本 
<td colspan = "3" align = "center"> 跨 3 列 </td> 
<td> gnbsp;</td> 
</tr> 
EE 
<td> gnbsp;</td> 
<td> gnbsp;</td> 
<td> gnbsp;</td> 
<td> gnbsp;</td> 
</tr> 
</table> 
</body> 
</html > 


程序 4-4 设置 表格 为 3 行 4 列 ,第 2 行 第 1 个 单元 格 的 colspan 的 值 为 3, 说 明 该 单元 格 
跨 3 列 , 网 页 显示 效果 如 图 4-4 所 示 。 


村 表 格 跨 列 - Nicrosoft Internet Explorer ~ 口 又 
文件 (E) ”编辑 (E) 查看 V) 收 蛮 包工 RD ” 慷 


@ae- 日 - 国 国 的 有 


地 址 (D) | 笔 ] G:Wwebvpart4\ 程 序 44.ht 轴 ] 图 转 到 :链接 ” 

















4-4 单元 格 跨 列 显 示 效 果 


2. 设置 单元 格 跨行 
rowspan 属性 用 于 设置 表格 中 某 一 单元 格 跨 几 个 行进 行 合并 (纵向 合并 ) 。 
基本 语法 : 





<td rowspan =""> 


语法 解释 : 
rowlspan 的 值 就 是 单元 格 进行 纵向 合并 时 所 跨 的 行 数 ,如 某 一 个 单元 格 与 其 下 面 两 个 
单元 格 合 并 ,rowspan 的 值 设 为 3。 
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【 例 4-5】 一 个 设置 表格 单元 格 跨行 的 实例 。 


< == 程序 4=5==> 
<html > 
<head> 
<title> 表 格 跨 行 </title> 
</head> 
<body> 
<table border = "1" > 
<Er> 
<td> gnbsp;</td> 
<td rowspan = "3" align = "center" 
<td> gnbsp;</td> < td> gnbsp;</td> 
</tr> 
写生 这 
<td> gnbsp;</td>< td> gnbsp;</td 
</tr> 
tr 
<td> gnbsp;</td>< td> gnbsp;</td 
jt 
</table> 
</body> 
</html > 





valign = "middle"> 跨 3 行 </td> 


><td> gnbsp;</td> 


><td>&gnbsp;</td> 


程序 4-5 设置 表格 为 3 行 4 列 ,第 2 列 第 1 个 单元 格 的 rowspan 的 值 为 3, 说 明 该 单元 


格 跨 3 行 ,网 页 显示 效果 如 图 4-5 所 示 。 


EE 所 
文件 ”编辑 (E) 


crosoft Internet Explorer ~ 口 X 
查看 VW) 收 戌 (8) ”工具 D ” 


@aa -© 国 回 的 用时 





4-5 





单元 格 跨行 显示 效果 


4.3 使 用 表格 布局 网 页 


网 页 是 网 站 构成 的 基本 元 素 。 在 设 
片 的 处 理 等 ,而 且 还 要 考虑 另 一 个 非常 


计 网 页 时 ,不 但 要 考虑 色彩 的 搭配 ,文字 的 变化 和 图 
外 要 的 因素 一 一 网 页 的 布局 。 





4.3.1 网 页 布局 类 型 


下 面 简单 讨论 一 下 网 页 布局 类 型 。 网 页 布局 大 致 可 分 为 “ 国 ” 字 型 拐角 型 .标题 正文 
型 .左右 框架 型 、 上 下 框架 型 综合 框架 型 .封面 型 等 。 

(1)“ 国 ” 字 型 。 这 种 类 型 也 称 为 “ 同 ”" 字 型 ,是 一 些 大 型 网 站 所 喜欢 的 类 型 , 即 最 上 面 是 
网 站 的 标题 及 横幅 广告 条 , 接 下 来 就 是 网 站 的 主要 内 容 , 左 右 分 列 一 些 两 小 条 内 容 , 中 间 是 
主要 部 分 ,与 左右 一 起 罗列 到 底 , 最 下 面 是 网 站 的 一 些 基本 信息 、 联 系 方式 ,版权 声明 等 。 这 
种 结构 是 人 们 在 网 上 见 到 的 最 多 的 一 种 结构 类 型 。 

(2) 拐角 型 。 这 种 类 型 的 结构 与 * 国 ” 字 型 其 实 只 是 形式 上 的 区 别 , 上 面 是 标题 及 广告 
横幅 , 接 下 来 的 左 侧 是 一 窗 列 链接 等 , 右 列 是 很 宽 的 正文 ,下 面 也 是 一 些 网 站 的 辅助 信息 。 
在 这 种 类 型 中 ,一 种 很 常见 的 类 型 是 最 上 面 是 标题 及 广告 , 左 侧 是 导航 链接 。 

(3) 标题 正文 型 。 这 种 类 型 即 最 上 面 是 标题 或 类 似 的 一 些 东西 ,下 面 是 正文 ,如 一 些 文 
章 页 面 或 注册 页 面 等 。 

(4) 左右 框架 型 。 这 是 一 种 左右 为 两 页 的 框架 结构 ,一般 左 面 是 导航 链接 ,有 时 最 上 面 
会 有 一 个 小 的 标题 或 标志 ,右面 是 正文 。 大 部 分 的 大 型 论坛 都 是 这 种 结构 的 ,有 一 些 企业 网 
站 也 喜欢 采用 。 这 种 类 型 结构 非常 清晰 ,一目了然 。 

(5) 上 下 框架 型 。 这 种 类 型 与 左右 框架 型 类 似 ,区 别 在 于 它 是 一 种 上 下 分 为 两 页 的 框 
架 结构 。 
(6) 综合 框架 型 。 左 右 框架 型 与 上 下 框架 型 的 结合 体 , 是 相对 复杂 的 一 种 框架 结构 。 

(7) 封面 型 。 这 种 类 型 基本 上 是 出 现在 一 些 网 站 的 首页 ,大 部 分 是 一 些 精美 的 平面 设 
计 结 合 一 些小 的 动画 , 放 上 几 个 简单 的 链接 或 者 仅 是 一 个 “进入 "的 链接 其 至 直接 在 首页 的 
片上 做 链接 而 没有 任何 提示 。 这 种 类 型 大 部 分 出 现在 企业 网 站 和 个 人 主页 ,如 果 处 理 得 
好 ,会 给 人 带 来 赏心悦目 的 感觉 。 


4.3.2 网 页 布局 实例 
【 例 4-6】 一 个 利用 表格 嵌 套 进行 网 页 布局 的 实例 。 



































<1== 和 序 4=6==> 
<html> 
<head> 
<title> 利 用 表格 布局 网 页 </title> 
</head> 
< body> 
<table border= "1" > 
Er 
<td colspan = "2" > banner 图 片 </td> 
</tr> 
Er 
<td> 
<table border = "1" > 
<tr> 
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<td> 栏 目 1 导航 </td> 


</tr> 
Er 
<td> 栏 目 2 导航 </td> 
SE 
> 
<td> 栏 目 3 导航 </td> 
</tr> 
KEr> 
<td > 栏目 4 导航 </td> 
</tr> 
</table> 
</td> 
<td> 内 容 区 域 </td> 
</tr> 
«tr 
<td colspan = "2" > 版 权 信 息 </td> 
</tr> 
</table> 
</body> 
</html > 


程序 4-6 通过 设置 表格 布局 网 页 为 一 个 拐角 型 页 面 , 网 页 显示 效果 如 图 4-6 所 示 。 


马 利 用 表格 布局 网 页 - Microsoft Internet Explorer 
文件 E) ”编辑 (E) ”查看 (W) 收 若 (和 ) 工具 (DD 帮助 (中 


-日 - 国 国 的 户 时 次 tmx 加 合生 回 - 回 科 


地 址 (D) 轿 GiWwebpart4\ 程 序 4-6,html 











banner 图 片 


栏目 1 导航 


栏目 2 导航 


栏目 3 导航 


栏目 4 导航 












































图 4-6 利用 表格 布局 网 页 显示 效果 


4.4 创建 框架 


框架 技术 可 以 将 浏览 器 分 割 成 多 个 小 窗口 ,各 窗口 扮演 不 同 的 角色 ,并 且 在 每 个 小 窗口 
中 可 以 显示 不 同 的 网 页 ,实现 不 同 的 功能 。 这 样 就 可 以 很 方便 地 利用 框架 在 浏览 器 中 浏览 
不 同 的 网 页 。 
4.4.1 定义 框架 

框架 的 基本 结构 主要 分 为 框架 集 和 框架 两 个 部 分 。 它 是 利用 < frameset > 标记 与 
< frame > 标记 来 定义 的 ,其 中 < frameset > 标记 用 于 定义 框架 集 , 而 < frame > 标记 则 用 于 定 
义 框架 。 

基本 语法 : 





<html> 

< frameset…> 
< frame … /> 
< frame … /> 
< frame … /> 

</frameset> 

<noframe> 

</noframe > 

</html > 


语法 解释 : 

(1) < frameset > 标记 和 < frame > 标记 中 的 省 略 号 表示 这 两 个 标记 中 的 具体 属性 ,常用 
的 属性 本 章 将 结合 具体 实例 进行 详细 讲解 。< frameset > 标记 不 可 以 和 < body > 标记 一 起 使 
用 ,否则 将 出 现 显 示 异 常 。< frameset > 标记 在 使 用 时 直接 包含 在 < html > 标记 中 即 可 。 

(2) < frame > 标记 主要 用 来 定义 框架 .用 来 控制 所 代表 的 窗口 框架 。 

(3) < noframe > </noframe > 之 间 放 置 不 支持 frame 功能 的 浏览 器 显示 的 文本 提示 。 


4.4.2 利用 框架 分 审 窗 口 


常见 的 窗口 分 割 方式 包括 水 平分 割 、 垂 直 分 割 和 和 骨 套 分 割 。 具 体 采用 哪 种 分 割 方式 , 取 
决 于 实际 需要 ,可 用 < frameset > 标记 中 的 rows( 水 平分 割 ) 或 cols( 垂 直 分 割 ) 属 性 来 进行 
分 割 。 

1. 水 平分 割 窗口 

rows 属性 可 以 定义 窗口 的 水 平分 割 。 

基本 语法 : 





< frameset rows = "高 度 1, 高 度 2, …，* "> 
< frame> 
< frame > 


</frameset > 
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语法 解释 : 

(1) rows 属性 的 值 代表 各 子 窗口 的 高 度 , 第 一 个 子 窗口 高 为 高 度 1, 第 二 个 子 窗口 高 为 
高 度 2, 以 此 类 推 ,而 最 后 一 个 * , 则 代表 最 后 一 个 子 窗口 的 高 度 , 值 为 其 他 子 窗口 高 度 分 配 
后 所 剩余 的 高 度 。 

(2) 设置 高 度数 值 的 方式 有 以 下 两 种 。 

@ 采用 整数 设置 ,单位 为 像素 (px) ,语法 如 下 : 





< frameset rows = "100,200, x "> 


@ 用 百分比 设置 ,语法 如 下 : 


< frameset rows ="20%,50%,*"> 
【 例 4-7】 一 个 创建 包含 3 个 子 窗口 ,对 窗口 进行 水 平分 割 的 实例 。 


<! -- 程序 4-7-> 

<html> 

<frameset rows = "20,30, * "> 
<frame> 
<frame> 
<frame> 

</frameset > 

</html > 





程序 4-7 创建 一 个 框架 集 分 成 3 个 水 平子 窗口 ,第 一 个 子 窗 口 的 高 度 为 20px, 第 二 个 子 
窗口 的 高 度 为 30px, 第 三 个 子 窗口 的 高 度 为 剩余 高 度 , 网 页 显示 效果 如 图 4-7 所 示 。 


文件 日 所 可 (D 查看 收 项 @) 工具 ID 和 且 td 
@ 二 -上 日 - 国 国 的 月 由 次 wa 


地 址 (D) | Gtiwebipart4\ 程 序 4-7.html 








4-7 ”水 平分 割 窗口 显示 效果 


2. 垂直 分 割 窗口 
cols 属性 可 以 定义 窗口 的 垂直 分 割 。 
基本 语法 : 





< frameset cols = "宽度 1, 宽度 2, …，* "> 
< frame> 
< frame> 


</frameset> 


语法 解释 : 
窗口 垂直 分 割 的 宽度 设置 与 水 平分 割 的 高 度 设置 方式 相同 ,这 里 不 再 费 述 。 
【 例 4-8】 一 个 创建 包含 3 个 子 窗口 ,对 窗口 进行 垂直 分 割 的 实例 。 


<! -- 程序 4-8--> 

<html> 

<frameset cols = "20%,30%,*x*"> 
<frame> 
<frame> 
<frame> 

</frameset > 

</html > 





程序 4-8 创建 一 个 框架 集 分 成 3 个 垂直 子 窗口 ,第 一 个 子 窗口 的 宽度 为 总 宽度 的 20%， 
第 二 个 子 窗口 的 宽度 为 总 宽度 的 30% ,第 三 个 子 窗 口 的 宽度 为 剩余 宽度 ,网 页 显示 效果 如 
4-8 所 示 。 














E TM TT WiCTO5ofE Internet 
文件 (E) ”编辑 (E) ”查看 (V) 收藏 工具 ID 帮助 中 ) 


@ae -日 - 国 固 的 ss 坎 ea 
地 址 (D) | 棚 G:Wwebtpart4\ 程 序 4-8.html 加 园 基 到 : 狂 接 ” 








图 4-8 垂直 分 割 窗 口 显 示 效 果 





4.4.3 框架 的 庶 套 


如 果 进 行 网 页 布局 时 需要 创建 同时 包含 横向 和 纵向 的 框架 ,那么 就 需要 利用 框架 的 赔 
套 创 建 复杂 的 框架 集 。 

进行 框架 嵌 套 时 ,就 是 在 一 个 框架 集中 包含 了 另外 一 个 框架 集 。 也 就 是 在 一 个 框架 集 
中 原来 应 该 为 < frame > 标记 的 位 置 由 框架 集 标记 代替 。 
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【 例 4-9】 一 个 框架 钥 套 的 实例 。 


<! 一 - 程序 4-9--> 

<html> 

< frameset rows = "40, 300"> 

<frame> 

< frameset cols = "70,702"> 
<frame> 





<frame> 
</frameset > 
</frameset > 
</html > 


程序 4-9 布局 一 个 厂 字 型 网 页 ,网 页 是 一 个 水 平分 割 和 垂直 分 割 嵌 套 的 综合 实例 ,首先 
把 窗口 水 平分 割 成 两 个 子 窗口 ,下 面子 窗口 又 被 垂直 分 割 成 两 个 子 窗口 ,网 页 显示 效果 如 
图 4-9 所 示 。 














写 GiWweb\part 相 程序 4-9.html - Microsoft Internet 
文件 (E) ”编辑 (E) ”查看 (WD 收藏 (a) 工具 (D 帮助 中 


Orn. © -四 @O Par Huma 
地 址 (0) | 辆 Gilweblpart4\ 程 序 4-9.html | 因 轩 到 :乌拉 >” 
| 





外 | 





图 4-9 框架 嵌 套 显示 效果 


4.4.4 框架 的 初始 化 


框架 初始 化 是 指 为 各 个 框架 指定 初始 显示 的 页 面 ,也 就 是 在 < frame > 标记 中 使 用 src 
属性 指定 框架 中 最 初 显 示 的 页 面 。 指 定 页 面 可 以 使 用 相对 路 径 , 也 可 以 使 用 绝对 路 径 。 
基本 语法 : 


<frameset cols = "宽度 1, 宽度 2,…,* "> 
<frame src= "url"> 
<frame src= "url"> 

</frameset > 


语法 解释 : 
< frame > 的 src 属性 值 设置 为 初始 显示 页 面 的 路 径 。 





【 例 4-10】 一 个 框架 子 窗口 初始 化 的 实例 。 


<! -- 程序 4-10--> 
<html> 
<frameset rows = "40,300"> 
<frame src= "程序 4 一 10a.html"> 
<frameset cols = "70,702"> 
<frame src= "程序 4- 10b. html"> 
<frame src= "程序 4- 10c. html"> 
</frameset > 
</frameset > 
</html > 


<! -- 程序 4-10a--> 
<head> 





<meta http - equiv= "Content - Type" content = "text/html; charset = gb2312" /> 


<title > 标题 </title> 
</head> 

<body> 

标题 栏 

</body> 

</html> 


程序 4-10 创建 一 个 组 套 框架 包含 3 个 子 窗口 ,第 一 个 子 窗口 的 初始 化 页 面 为 “ 程 
序 4-10a. html”, 第 二 个 子 窗口 的 初始 化 页 面 为 “程序 4-10b. html”, 第 三 个 子 窗口 的 初始 化 


页 面 为 “程序 4-10c. html”, 网 页 显示 效果 如 图 4-10 所 示 。 


急 GWweb\part 相 程序 4-10.html - Microsoft Internet Explorer 
文件 E) 蝙 狠 (5) ”查看 () 收藏 (4) 工具 (D ”帮助 (H) 


ie- 日 国 国 铭记 时 寅 Wm 人 @ 


地 址 (0) | 和 Giiweblpart 所 程序 4-10.html 加固 $a : 锭 ” 








标题 栏 


向 | 
加 





正文 





图 4-10 框架 初始 化 显示 效果 
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4.4.5 创建 浮动 框架 

在 浏览 网 页 的 时 候 会 看 到 在 浏览 器 窗口 含有 孤立 的 子 窗口 ,这 就 是 浮动 框架 ,插入 浮 动 
框架 要 使 用 成 对 的 标记 < iframe ></iframe >, 同 样 , 会 用 sre 属性 来 设置 框架 中 显示 文件 的 
路 径 。 

基本 语法 : 


< iframe src = "url"></iframe> 





语法 解释 : 
在 < iframe > 的 src 属性 中 设置 显示 页 面 的 路 径 。 与 框架 不 同 ,浮动 框架 标记 可 以 包含 
在 < body > 标记 范围 内 。 


< iframe > 标记 中 常用 属性 及 其 描述 如 表 4-2 所 示 。 
表 4-2 < iframe > 标记 常用 属性 及 其 描述 


属 性 描 述 
align 规定 框架 的 水 平 对 齐 方式 
width 规定 浮动 框架 窗口 的 宽度 
height 规定 浮动 框架 窗口 的 高 度 
Src 规定 显示 网 页 文件 的 路 径 
name 规定 框架 的 名 称 
noresize 规定 框架 尺寸 是 否 可 以 调整 
scrolling 规定 框架 滚动 条 
frameborder 规定 框架 边框 


【 例 4-11】 一 个 浮动 框架 窗口 的 实例 。 


<! -- 程序 4-11--> 
<html> 
<head> 
<title> 浮 动 框架 </title> 
</head> 
<body> 
< table border = "1"> 
<tr> 
<td> 
第 一 个 浮动 框架 : 
< iframe height = "50" width= "300" frameborder = "1" 
scrolling = "no” src= "程序 4- 11a. html"> 
</iframe> 
</td> 
</tr> 
EE 
<td> 
第 二 个 浮动 框架 : 
< iframe height = "50" width= "200" frameborder = "1" 





src= "程序 4- 11a. htm1"> 
</ iframe> 
</td> 
</tr> 
</table> 
</body> 
</html > 


纪 =- 程序 4=1la-=> 
<html> 
<head> 
< title> 浮 动 框架 内 部 显示 内 容 </title> 
</head> 
<body> 
< table border = "0"> 

E> 

<td height = "40"width = "300"> 

框架 中 显示 的 内 容 . 
</td> 

</tr> 
</table> 
</body> 
</html > 


程序 4-11 包含 两 个 浮动 框架 ,这 两 个 框架 窗口 都 显示 “程序 4-11a. html” 网 页 文件 ,在 第 一 
个 框架 中 由 于 设置 了 scrolling 属性 值 为 no 所 以 没有 滚动 条 ,网 页 显示 效果 如 图 4-11 所 示 。 


印 浮动 框架 - Microsoft Internet Explorer 
文件 E) ”编辑 (E) ”查看 (W 。 收 送 (4) 工具 (D 帮助 中) 


Om -© 国 国 的 Pr Ws 加 


地 址 (0) | 全 Gtwebtpart4 程 序 4-lLhtn 闻 因 到 :六 ” 








第 一 个 浮动 框架 : 





| 框架 中 显示 的 内 容 。 


第 二 个 浮动 框架 ， | 框架 中 显示 的 内 容 。 ”图 





4-11 浮动 框架 显示 效果 


4.5 框架 控制 


本 节 将 详细 介绍 通过 设置 < frame > 标记 和 < frameset > 标记 中 的 各 种 属性 ,来 控制 框架 
的 显示 效果 。 4 
章 
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4.5.1 控制 框架 边框 


1. 框架 的 隐藏 
基本 语法 : 


< frame frameborder = ""> 或 < frameset frameborder = ""> 


语法 解释 : 
(1) < frame > 标记 中 的 frameborder 属性 可 以 控制 框架 的 边框 。 属 性 可 选 的 值 为 0 或 
1, 值 为 0 时 没有 边框 , 值 为 1 时 生成 3D 边框 (默认 值 )。 只 有 将 所 有 相 邻 的 框架 的 边框 都 


设置 为 0 时 ,才能 隐藏 边框 。 
(2) < frameset > 标记 中 的 frameborder 属性 可 以 控制 框架 集中 所 有 子 窗口 的 边框 。 


【 例 4-12】 一 个 隐藏 边框 的 实例 。 


<! -- 程序 4-12--> 
<html> 
< frameset rows = "40,300"> 
<frame src= "程序 4- 10a.html"” frameborder = "0"> 
<frameset cols = "70,702"> 
<frame src= "程序 4- 10b. html" frameborder = "0"> 
<frame src= "程序 4- 10c. html" frameborder = "0"> 
</frameset > 
</frameset > 
</html> 





程序 4-12 将 所 有 的 框架 边框 都 设置 为 0, 所 以 显示 时 不 显示 边框 ,网 页 显示 效果 如 图 4-12 
所 示 。 


文件 编 各 @。 查看 W。 收 大 工具 (D 和 有 
四 凶 - 加 - 国 国 的 用 旦 责 s 加 加- 


地 址 (0) | 咎 Giweblpart 程 序 4-12.html 图 园区 N.S 











4-12 隐藏 边框 显示 效果 


2. 框架 的 边框 
基本 语法 : 


< frameset border = ""> 


语法 解释 : 





< frameset > 标记 中 的 border 属性 可 以 控制 框架 边框 的 宽度 ,单位 为 像素 。 


【 例 4-13】 一 个 设置 框架 边框 的 实例 。 


<!-- 程序 4-13--> 
<html> 
< frameset rows = "40,300" border = "10"> 
<frame src= "程序 4- 10a.html"> 
<frameset cols = "70,702"> 
<frame src= "程序 4- 10b. html" > 
<frame src= "程序 4- 10c. html" > 
</frameset > 
</frameset > 
</html > 





程序 4-13 中 设置 框架 边框 宽度 为 10 像素 ,所 以 框架 边框 的 宽度 相对 比较 宽 , 网 页 显示 


效果 如 图 4-13 所 示 。 


E TV TE EI 
文件 (E) ”编辑 (E) ”查看 (VW) 收 礁 (&) 工具 (D 和 才 助 (中 


@ 红 -日 - 国 国 入 用 暴 认 mx 加 加- 


地 址 (0) | 俩 Glweblpart 小 程序 4-13.html SSE 








4-13 框架 边框 的 宽度 显示 效果 
3. 框架 滚动 条 和 不 可 移动 性 
基本 语法 : 


mm 


< frame scrolling= noresize> 


语法 解释 : 
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<frame > 标记 中 的 scrolling 属性 值 为 yes、no 或 auto。 当 属性 值 为 yes 时 ,强制 为 框架 
添加 滚动 条 。 当 属性 值 为 no 时 ,框架 内 不 加 滚动 条 。 当 属性 值 为 auto 时 ,根据 内 容 的 多 少 
自动 添加 滚动 条 (默认 值 ) 。 

当 把 鼠标 指针 移 到 框架 边框 时 ,可 以 通过 拖 动 调整 框架 大 小 ,noresize 属性 可 以 固定 框 
架 的 位 置 和 大 小 。 

【 例 4-14】 一 个 设置 框架 滚动 条 和 不 可 移动 性 的 实例 。 





<1== 程序 4=14==> 
<html > 
< frameset rows = "40,300" > 
<frame src= "程序 4- 10a.html"” scrolling= "no" noresize> 
<frameset cols = "70,702"> 
<frame src= "程序 4- 10b. html" scrolling = "yes"> 
<frame src= "程序 4- 10c. html" > 
</frameset> 
</frameset > 
</html > 





程序 4-14 中 设置 第 一 行 子 窗口 的 scrolling 二 "no” noresize, 所 以 不 能 调整 第 一 行 子 窗 
口 和 第 二 行 子 窗口 之 间 的 大 小 并 且 没 有 滚动 条 。 第 二 行 左 面子 窗口 由 于 设置 scrolling 一 
"yes", 所 以 强制 加 上 了 滚动 条 ,并 且 第 二 行 两 个 子 窗口 之 间 可 以 调整 大 小 ,网 页 显示 效果 如 
到 4-14 所 示 。 














ET TT 程序 于 1T4.mT- WiCTO5OfLTmeTnet EXPIOTET 
文件 (E) ”编辑 (E) 查看 (V) 收 语 (A) 工具 (D 帮助 由 


a- © 国 国 @ Ps We @ OB- 


地 址 (0) | 契 ] Gtwebtpart4 程 序 4-14.html 回回 # 双 :is ” 
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图 4-14 框架 滚动 条 和 不 可 移动 性 显示 效果 


4.5.2 控制 框架 子 窗口 


1. 定义 子 窗口 名 称 
基本 语法 : 


< frame name= "" > 


语法 解释 : 


< frame > 标记 中 的 name 属性 用 来 指定 框架 的 名 称 。 指 定 框架 名 称 后 可 以 指定 超 链接 
的 target 属性 值 为 框架 名 称 , 当 单 击 超 链接 时 ,在 指定 框架 内 显示 超 链 接 目标 。 





【 例 4-15】 一 


个 设置 框架 子 窗口 名 称 的 实例 。 


< 一 程序 4=- 后 => 


<html > 


< frameset rows = "40,300" > 
<frame src= "程序 4- 10a.html"” name = "top"> 
<frame src= "程序 4-10c.html" name = "bottom"> 


</frameset > 
</html > 





程序 4-15 中 设置 第 一 行 子 窗口 的 名 称 为 top ,下 面子 窗口 名 称 为 bottom。 设 置 框架 名 
称 对 网 页 显示 没有 影响 ,网 页 显示 效果 如 图 4-15 所 示 。 


E TAVITA I 
文件 (E) ”编辑 (E) ”查看 (VW) 收藏 (&) 工具 (D 帮助 (H) 


fe- 日 - 国 国 给 记 暴 区 Wx 回回 - 


地 址 (D) | 和 Gilwebipart4 程 序 4-15.html 加 国庆 接 ” 
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图 4-15 框架 名 称 显示 效果 


2. 设置 子 窗口 边 距 


基本 语法 : 


< frame marginwidth = "" marginheight ="" > 


语法 解释 : 


marginwidth 





属性 可 以 控制 框架 内 容 和 框架 左右 边框 之 间 的 距离 , marginheight 属性 





则 控制 框架 内 容 和 框架 上 下 边框 之 间 的 距离 。 这 两 个 属性 的 取 值 单位 均 为 像素 。 
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【 例 4-16】 一 个 设置 框架 子 窗口 边 距 的 实例 。 


<! 一 - 程序 4-16-> 

<html> 

< frameset rows = "40, 300" > 
<frame src= "程序 4- 10a.html"> 
<frame src= "程序 4- 10c.html" marginwidth = "50" marginheight = "50"> [DE 

</frameset > 视频 讲解 

</html > 





程序 4-16 中 第 一 行 子 窗 口 的 边 距 保持 默认 值 ,下 面子 窗口 的 左右 和 上 下 边 距 均 设 置 为 
50 像素 。 网 页 中 下 面 窗口 的 边 距 明显 大 于 上 面 窗口 的 边 距 ,网 页 显示 效果 如 图 4-16 所 示 。 


EV 程序 王 16.imT- NICTO50fE TheTnet EXPIOTET 
文件 (E) ”编辑 (@ ”查看 (V) 收 语 (A) 工具 (D 帮助 (由 


-日 , 因 国 多 Ps We @ 人- 


地 址 (D) | 外 | Giweblpart 程 序 4-16.html 回回 9 :人 ” 











图 4-16 框架 边 距 显 示 效 果 


4.6 使 用 框架 布局 网 页 实例 


【 例 4-17】 一 个 利用 框架 布局 网 页 的 实例 ,这 个 程序 运用 了 框架 符 套 实现 了 一 个 类 似 
于 程序 4-6 的 网 页 布局 。 


< 一 程序 4=17=-> 
< htnl > 
< frameset rows = "70,300,40"> 
<frame src= "程序 4- 17top. htm1"> 
<frameset cols = "172,600"> 
<frame src= "程序 4- 17left. html" marginheight = "0" marginwidth = "0"> 
<frame src= "程序 4- 17right.html”name = "right"> 
</frameset> 
<frame src= "程序 4- 17bottom. html"> 
</frameset > 
</html > 


程序 4-17 外 层 框架 设置 了 3 个 水 平分 割 的 子 窗口 ,3 个 子 窗 口 的 高 度 分 别 是 70 像素 、 
300 像素 和 40 像素 ,第 2 个 子 窗 口 又 被 垂直 分 割 成 两 个 子 窗口 ,宽度 分 别 为 172 像素 和 600 
像素 。 顶 部 初始 化 网 页 为 程序 4-17top, 程序 4-17bottom 和 程序 4-17right 内 容 与 它 内 容 





相似 。 


<! -- 程序 4-17top--> 
<html> 
<head> 


<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 


<title> banner 图 片 </title> 
</head> 

<body> 

<p align = "center"> banner 图 片 </p> 
</body> 

</html> 





左 侧 导 航 栏 初始 化 程序 为 程序 4-17left ,注意 程序 中 链接 的 target 属性 值 为 右 侧 框架 名 


称 "right”。 


< == =Ift==> 
<html> 
<head> 


<meta http - equiv= "Content - Type" content = "text/htm1; charset = gb2312" /> 


<title> 导 航 栏目 </title> 
</head> 
<body> 
<table border= "1" > 
<tr> 
<td><a href =" 间 "target = "right"> 栏 目 1 导航 </a></td> 
</tr> 
<tr> 
<td><a href =" 井 "target = "right"> 栏 目 2 导航 </a></td> 
</tr> 
<tr> 
<td><a href =" 井 "target= "right"> 栏 目 3 导航 </a></td> 
</tr> 
EE 
<td><a href =" 间 "target = "right"> 栏 目 4 导航 </a></td> 
</tr> 
</table> 
</body> 
</html > 








网 页 显示 效果 如 图 4-17 所 示 。 
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文件 加。 纺 加 (日 查看 收 总 的 工具 (D 和 助 册 a 
ia- 日 ,- 国 固 入 记 时 交加 全 -学 回 -同志 
地 址 (D) 简 Gi\webipart 沁 程序 4-17.html 疾 图 # :链接 ” 
banner 图 片 
显示 
心目 1 号 角 初始 显示 的 内 容 
| 
栏目 2 
幅 目 4 导航 
版 权 信息 = 
DE 时 My Computer 


图 4-17 框架 网 页 布局 显示 效果 


4.7 上 机 练习 与 指导 


4.7.1 使 用 表格 布局 网 页 的 应 用 
【 例 4-18】 一 个 利用 表格 布局 网 页 的 应 用 ,网 页 布局 为 国 " 字 型 。 


<! -- 程序 4-18--> 
< htm]l > 
<head> 
<title> 表 格 布局 网 页 应 用 </title> 
</head> 
<body> 
< table border = "0" width= "772" align = "center" > 
之 
<td colspan = "2" height = "40" bgcolor = " 井 0033FF" align = "center"> 
表格 布局 网 页 应 用 </td> 
</tr> 
<tr> 
<td> 
<a href = "程序 4- 18a.html" target = "content"> 孟 浩然 简介 </a>< br> 
<a href = "程序 4- 18b.html" target = "content"> 宿 桐庐 江 寄 广陵 旧 游 </a> 
</td> 
<td width= "600"> 
< iframe src = "程序 4- 18a. html" frameborder = "0" width= "590" height = "280" name = "content"> 
</ iframe> 


</td> 

</tr> 

Er 

<td colspan = "2" > 

版 权 信息 </td> 

</tr> 
</table> 
</body> 
</html > 


程序 4-18 综合 了 表格 和 浮动 框架 对 网 页 进行 布局 ,浮动 框架 的 名 称 为 content, 左 侧 的 
导航 链接 的 target 属性 值 为 content, 所 以 单 击 链接 时 ,网 页 在 浮动 框架 内 显示 ,网 页 效果 如 
图 4-18 所 示 。 本 例 中 关于 颜色 设置 内 容 , 可 以 参照 后 面 CSS 相关 内 容 。 

















马 表 格 布 局 网 页 应 用 - Wicrosoft Thternet EXPIOTET 
文件 (E) ”编辑 (查看 (W) 收 疗 国 。 工具 ID 帮助 (H) 


@ 避 -日 - 国 国 给 户 时 交加 全 - 符 回 - 恒 所 
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表格 布局 网 页 应 用 


孟浩然 (689-740) ， 束 阳 人 。 早 岁 隐居 家 乡 的 诈 门 山 ， 闭 门 读书 ， 以 诗 自 娱 ， 
后 往 吴 越 等 地 漫游 。 他 的 诗 多 写 山林 静 趣 和 怀才不遇 的 苦 间 。 由 于 生活 面 窄 ， 
局 中 了 区 喘 的 社会 现实 个 多 ， 但 其 艺术 造 诺 较 高 ， 写 景 诗 有 不 少 刻画 入 柚 的 名 








图 4-18 表格 布局 网 页 显示 效果 


4.7.2 使 用 框架 布局 网 页 的 应 用 
【 例 4-19】 一 个 利用 框架 布局 网 页 的 应 用 ,获得 与 程序 4-18 相同 的 效果 。 


<! -- 程序 4-19--> 
<html> 
< frameset rows = "40,300,40" frameborder = "0"> 
<frame src= "程序 4 一 19top. html" noresize scrolling= "no"> 
<frameset cols = "172,600"> 
<frame src= "程序 4- 19nav. html" scrolling = "no" noresize> 


地 全 趴 


用 五 TML 布局 网 页 


Web 前 竟 设 计 与 开发 一 一 HTML5 十 CSS3 十 JavaScript 微 课 版 





<frame src= "程序 4- 18a. html" name = "content" > 
</frameset > 
<frame src= "程序 4 一 19bottom. html" scrolling = "no" noresize> 
</frameset > 
</html > 


<! -- 程序 4- 19nav- 一 > 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 导 航 链接 网 页 </title> 
</head> 
<body> 
<a href = "程序 4- 18a.html" target = "content"> 孟 浩然 简介 </a><br> 
<a href = "程序 4- 18b. html”target = "content"> 宿 桐庐 江 寄 广陵 旧 游 </a > 
</body> 
</html > 


程序 4-19 使 用 了 框架 典 套 ,中 间 靠 右 的 子 窗 口 名 称 为 content, 链 接 的 目标 设置 为 
content, 所 以 单 击 链接 网 页 内 容 时 在 这 个 子 窗口 内 显示 。 


4.8 本 章 习 题 








一 、 选 择 题 
1. 如 果 想 获得 单元 格 跨行 效果 ,应 设置 < td > 标记 的 ( ) 属 性 。 
A. colspan B. rowspan C. cellspacing D. cellspadding 
2. 创建 浮动 框架 的 标记 是 ( ”)。 
A. <frame > B. < frameset > C. < iframe > D. < table > 
3. 设置 水 平分 割 框架 ,应 设置 < frameset > 的 ( ) 属 性 。 
A. cols B. rows C. colspan D. rowspan 
4. 以 下 标记 中 ,( ) 标 记 不 能 放 在 < body ></body > 标记 范围 内 。 
A. <table> B. < iframe > C <td> D. < frameset > 
二 、 填空 题 
1. 表格 标题 就 是 对 表格 内 容 的 简单 说 明 , 用 标记 来 定义 。 
2. 在 HTML5 中 ,< table > 标记 仅 支 持 属性 ,并 且 只 人 允许 使 用 值 " "或 "1"。 不 
支持 < table > 标记 HTML4. 01 中 的 其 他 属性 。 
3. 框架 的 基本 结构 主要 分 为 和 框架 两 个 部 分 。 它 是 利用 < frameset > 标记 与 
< frame > 标记 来 定义 的 。 
4. 框架 初始 化 就 是 在 < frame > 标记 中 使 用 属性 指定 框架 中 最 初 显示 的 页 面 。 
5. < frame > 标记 中 的 frameborder 属性 可 以 控制 框架 的 边框 ,其 值 为 时 隐藏 
边框 。 
6. < frame > 标记 中 的 scrolling 属性 值 为 时 ,框架 内 不 加 滚动 条 。 





7. < frame > 标记 中 的 属性 用 来 指定 框架 的 名 称 。 





第 5 章 表 单 


表单 作为 客户 与 服务 器 交互 的 重要 媒介 ,在 网 络 应 用 中 发 挥 的 作用 不 可 替代 。 表 单 作 
为 网 页 的 一 部 分 可 以 采集 客户 端 输入 的 信息 ,然后 发 送 给 服务 器 端 特 定 的 处 理 程 序 , 这 样 可 
以 完成 服务 器 端 和 客户 端 之 间 的 交互 ,从 而 实现 用 户 注 册 、 用 户 登 录 、 网 络 投票 ,在线 考试 等 
网 络 应 用 。 

本 章 主要 内 容 如 下 。 

。 表单 基础 。 

。 < input > 标记 。 

。 多 行文 本 框 。 

。 下 拉 列 表 框 。 

。 表单 应 用 。 





5.1 表单 基础 


表单 的 主要 功能 是 收集 信息 ,接受 浏览 者 在 网 页 中 的 操作 ,并 传递 给 CGI 或 ASP 等 服 
务 器 端的 表单 处 理 程序 。 有 了 表单 使 服务 器 端 不 仅 可 以 向 客户 端 发 送 网 页 数据 ,而 且 可 以 收 
集 来 自 客户 端 上 传 的 信息 。 表 单 通常 来 做 注册 登录 、` 网 络 问卷 调查 ,在 线 考试 等 需要 向 服务 器 
上 传 的 工作 ,这 些 来 自 客户 端的 数据 存储 于 数据 库 中 ,从 而 为 网 络 其 他 应 用 提供 必要 的 支持 。 


5.1.1 表单 的 定义 












































表单 实质 上 就 是 用 于 实现 网 页 浏览 者 和 服务 器 水 | 手机 号 登录 四 
端 之 间 信 息 交 换 的 一 种 页 面 元 素 , 在 WWW 上 被 广 | 
泛 用 于 各 种 信息 的 搜集 和 反馈 。 吓人 Glen 
在 Web 应 用 中 ,与 表单 工作 相关 的 有 两 个 重要 | 至 习 记 宙 7? 
组 成 部 分 : 一 是 描述 表单 的 HTML 源 代码 ; 二 是 用 | 扣 归 认 ~ 
于 处 理 用 户 在 表单 域 中 输入 信息 的 服务 器 端 应 用 程 加 两 周 内 自动 登录 回 ” 团 Sst 安全 登录 
序 , 如 ASP、JSP 等 。 本 好 | [法 | 
例如 ,图 5-1 所 示 是 一 个 典型 的 表单 应 用 ,用 户 
通过 网 页 表单 输入 账号 和 密码 , 单 击 " 登 录 ” 按 钮 ,这 a 
样 就 会 把 表单 收集 的 数据 上 传 到 服务 器 ,由 服务 器 
端 程序 判断 用 户 的 合法 性 。 


图 5-1 表单 示例 
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5.1.2 表单 控件 的 类 型 


表单 中 通常 包含 两 种 元 素 : 一 种 是 普通 的 页 面 元 素 , 如 文本 、 图 像 、 表 格 等 ; 另 一 种 是 
用 于 收集 信息 的 特定 页 面 元 素 , 即 表单 控件 ,如 按钮 .文本 框 、 密 码 框 等 。 

表单 像 一 个 容器 一 样 包含 各 种 类 型 的 控件 ,表单 内 的 控件 用 于 接收 用 户 的 输入 ,典型 的 
控件 有 文本 框 \ 按 钮 等 。 表 单 中 的 每 个 控件 都 有 特定 的 名 称 , 这 个 名 称 有 效 范围 是 所 在 表 
单 。 每 个 控件 都 有 初始 值 和 当前 值 , 初 始 值 是 由 网 页 设计 者 预先 指定 的 ,当前 值 是 由 用 户 与 
表单 控件 交互 操作 决定 的 , 当 提交 表单 时 ,会 把 控件 中 的 当前 值 提交 到 服务 器 端 。 

表单 控件 对 于 客户 端 用 户 和 服务 器 端 处 理 程序 交互 起 着 中 间 数 据 载体 的 作用 , HTML 
中 定义 了 以 下 类 型 的 表单 控件 。 

1. 文本 框 

文本 框 接受 任何 类 型 (字母 .数字 、 文 本 ) 的 输入 内 容 。 文 本 可 以 单行 或 多 行 显示 ,也 可 
以 以 密码 域 的 方式 显示 ,在 这 种 情况 下 ,输入 文本 将 被 替换 为 星 号 或 项 目 符号 ,避免 旁观 者 
看 到 这 些 文本 。 使 用 密码 输入 框 的 密码 及 其 他 信息 在 发 送 到 服务 器 时 并 未 进行 加 密 处 理 。 
所 传输 的 数据 可 能 会 以 字母 ,数字 、 文 本 形式 被 截获 并 被 读 取 。 因 此 ,始终 应 对 要 确保 安全 
的 数据 进行 加 密 。 

2. 按钮 

按钮 在 单 击 时 执行 操作 。 可 以 为 按钮 添加 自 定义 名 称 或 标签 ,或 者 使 用 预定 义 的 “ 提 
交 ” 或 “ 重 置 "标签 。 使 用 按钮 可 将 表单 数据 提交 到 服务 器 或 者 重 置 表单 ,还 可 以 指定 其 他 已 
在 脚本 中 定义 的 处 理 任务 。 

3. 单 选 框 

单 选 框 代表 互相 排斥 的 选择 。 在 某 单 选 框 组 (由 两 个 或 多 个 共享 同一 名 称 的 单 选 框 组 
成 ) 中 选择 一 个 单 选 框 ,就 会 取消 选择 该 组 中 的 其 他 所 有 单 选 框 。 

4. 复 选 框 

复 选 框 允 许 在 一 组 选项 中 选中 多 个 复 选 框 。 用 户 可 以 选中 任意 多 个 适用 的 复 选 框 。 

5. 下 拉 列 表 框 

下 拉 列 表 框 在 一 个 深 动 列表 中 显示 选项 值 ,用 户 可 以 从 该 滚动 列表 中 选择 多 个 选项 。 
“列表 ”选项 在 一 个 列表 中 显示 选项 值 .用户 只 能 从 中 选择 单个 选项 。 在 下 列 情况 中 使 用 下 
拉 列 表 框 : 只 有 在 有 限 的 空间 内 但 必须 显示 多 个 内 容 项 ,或 者 要 控制 返回 给 服务 器 的 值 。 
下 拉 列 表 框 与 文本 框 不 同 , 在 文本 框 中 用 户 可 以 随心 所 欲 输入 任何 信息 ,甚至 包括 无 效 的 数 
据 , 对 于 下 拉 列 表 框 而 言 ,只 可 以 具体 设置 某 个 列表 返回 的 确定 值 。 

6. 文件 选择 输入 框 

文件 选择 输入 框 使 用 户 可 以 浏览 到 其 计算 机 上 的 某 个 文件 并 将 该 文件 作为 表单 数据 
上 传 。 

7. 隐藏 杠 

隐藏 框 存储 用 户 输入 的 信息 ,如 姓名 .电子 邮件 地 址 或 偏爱 的 查看 方式 ,并 在 该 用 户 下 
次 访问 此 站 点 时 使 用 这 些 数 据 。 


5.1.3 <form> 标 记 
表单 是 一 个 包含 表单 控件 的 区 域 ,如 果 要 在 网 页 中 添加 表单 ,就 要 在 文档 中 添加 < form > 








标记 。 
1. < form > 标记 的 用 法 
基本 语法 : 


<formname="" method=" "action=" "> 


表单 控件 


</form> 


语法 解释 : 

(1) name 属性 定义 表单 的 名 称 。 

(2) action 属性 指定 表单 处 理 程序 (CGI 或 ASP 等 服务 器 端的 表单 处 理 程序 ) 的 位 置 。 

(3) method 属性 定义 表单 结果 从 浏览 器 传送 到 服务 器 的 方式 ,属性 的 参数 值 一 般 有 两 
种 : get 和 post。 

2. post 方法 和 get 方法 

浏览 器 使 用 method 属性 设置 的 方法 将 表单 中 的 数据 传送 给 服务 器 进行 处 理 。 共 有 两 
种 方法 : post 方法 和 get 方法 ,默认 采用 get 方法 。 

如 果 采 用 post 方法 ,浏览 器 将 会 按照 下 面 的 步骤 来 发 送 数据 。 首 先 , 浏 览 器 将 与 action 
属性 中 指定 的 表单 处 理 服 务 器 建立 连接 ,其 次 浏览 器 就 会 按 分 段 传输 的 方法 将 数据 发 送 给 
服务 器 。 在 服务 器 端 ,post 样式 的 应 用 程序 开始 执行 时 ,就 应 该 从 一 个 标志 位 置 读 取 参 数 ， 
最 后 在 应 用 程序 能 够 使 用 这 些 表单 值 以 前 ,必须 对 这 些 参 数 进行 解码 。 用 户 特定 的 服务 器 
会 明确 指定 应 用 程序 应 该 如 何 接受 这 些 参 数 。 

另 一 种 情况 是 采用 get 方法 ,这 时 浏览 器 会 与 表单 处 理 服务 器 建立 连接 ,然后 直接 在 一 
个 传输 步骤 中 发 送 所 有 的 表单 数据 。 浏 览 器 会 将 数据 直接 附 在 表单 的 处 理 程 序 URL 之 
后 ,它们 两 者 之 间 用 ”"?” 进 行 分 隔 , 各 个 参数 之 间 用 "“& ”分隔 。 下 面 是 一 个 采用 get 方法 的 
URL 实例 。 








http://www. somesite. com/program ? parml = xl & param2 = x2 … 


一 般 浏览 器 通过 上 述 任何 一 种 方法 都 可 以 传输 表单 信息 ,而 有 些 服务 器 只 接受 其 中 一 
种 方法 提供 的 数据 。 可 以 在 < form > 标记 的 method 属性 中 指明 表单 处 理 服务 器 是 用 post 
还 是 用 get 方法 来 处 理 数据 。 


5.2 <input > 标记 


HTML5 中 较 大 变化 之 一 的 是 表单 ,传统 的 表单 , 即 HTML4 之 前 的 表单 , 称 为 表单 
1.0, 在 HTML5 中 把 新 的 表单 称 为 表单 2. 0。 表 单 1. 0 中 的 所 有 标记 和 属性 在 表单 2. 0 中 
都 是 适用 的 。 

< input > 标记 用 于 收集 用 户 输入 的 数据 。 根 据 < input > 标记 type 属性 值 的 不 同 , 输 入 
框 拥有 多 种 类 型 。 输 入 字段 可 以 是 文本 框 、 复 选 框 , 单 选 框 ,按钮 等 。 在 表单 2.0 中 ,新 增 了 
10 个 input type 标记 .包括 email .number、url 等 。 


表 学 


地 四 四 
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基本 语法 : 


<form> 
<input name =" " type=" "> 
</form> 


语法 解释 : 

(1) < input > 标记 主要 有 6 个 属性 : type、name、 size、value、maxlength、check。 其 中 
name 和 type 是 必 选 的 两 个 属性 。 

(2) name 属性 的 值 , 在 服务 器 端 处 理 相应 程序 中 获得 该 表单 控件 的 值 所 采用 变量 名 和 
它 相同 。 例 如 ,属性 值 为 “x1”, 那 么 服务 器 端 通过 在 request 对 象 中 xl 变量 的 值 来 获得 这 
个 表单 控件 的 值 。 

(3) 在 不 同 的 输入 字段 类 型 中 ,< input > 标记 的 格式 略 有 不 同 , 其 他 5 种 属性 因 type 类 
型 的 不 同 , 其 含义 也 不 同 。 

(4) type 在 表单 1. 0 下 主要 有 10 种 类 型 : text、 password .hidden submit、 reset、 
image ,radio checkbox ,file、button。 在 表单 2.0 下 ,新 增 了 10 种 类 型 : email .number、url、 


tel ,color range\search data month、week。 


S.2.1 单行 文本 框 


当 < input > 标记 的 type 属性 值 为 text 时 ,表示 该 输入 项 的 输入 信息 是 字符 串 。 此 时 ， 
浏览 器 会 在 相应 的 位 置 显示 一 个 文本 框 供用 户 输入 信息 。 
基本 语法 : 











<form> 
<input name =" " type= "text" maxlength="" size=" 
</form> 


"value=" "> 


语法 解释 : 

当 type 二 text 时 ,标记 为 用 户 可 输入 文本 的 单行 输入 字段 。 单 行文 本 框 还 有 3 个 可 选 
属性 : maxlength size 和 value。 

(1) maxlength 属性 用 于 设置 单行 输入 框 可 以 输入 的 最 大 字符 数 , 如 限制 用 户 名 为 10 
个 字符 .电话 号 码 最 多 为 11 个 数字 等 。 

(2) size 属性 用 于 设置 单行 文本 框 可 显示 的 最 大 字符 数 , 这 个 值 总 是 小 于 等 于 
maxlength 属性 的 值 , 当 输 入 的 字符 数 超过 文本 框 的 长 度 时 ,用 户 可 以 通过 移动 光标 来 查看 











超出 的 内 容 。 
(3) value 属性 为 文本 框 的 值 ,可 以 通过 设置 value 属性 的 值 来 指定 当 表 单 首次 被 载 人 
时 显示 在 输入 框 中 的 值 。 


(4) 如 果 需 要 一 个 随 表单 传送 到 客户 端 浏览 器 的 文本 框 ,希望 能 随 表单 把 值 提交 回来 ， 
并 且 用 户 能 够 看 到 且 不 能 修改 ,只 需要 添加 一 个 readonly 属性 即 可 。 
【 例 5-1】 一 个 通过 表单 中 单行 文本 框 输入 用 户 名 的 实例 。 


<p 程 席 汪 二 = 志和 


<html > 

<head> 

<title> 单 行文 本 框 </title> 

</head> 

<body> 

< form name = "form1”method = "post" action = "program.asp"> 
用 户 名 : < input type= "text" name = "username"> 

</form> 

</body> 

</html > 





页 面 效果 如 图 5-2 所 示 。 
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图 5-2 单行 文本 框 页 面 效 果 


5.2.2 密码 输入 框 


密码 输入 框 type 属性 值 为 password. 与 单行 文本 输入 框 看 起 来 非常 相似 ,所 不 同 的 只 
是 当 用 户 在 输入 内 容 时 ,用 " x "来 代替 显示 每 个 输入 的 字符 ,以 保证 密码 的 安全 性 。 


基本 语法 : 


<form> 


<input name =" " type= "password " maxlength=" " size=" "> 


</form> 


语法 解释 : 


如 果 要 在 表单 中 插入 密码 框 ,只 要 将 < input > 标记 中 type 属性 值 设 为 password 即 可 ， 


maxlength \size 属性 同文 件 输入 框 text 的 属性 一 样 不 再 蒙 述 





【 例 5-2】 一 个 包含 用 户 名 和 密码 框 的 实例 。 


<! -- 程序 5-2--> 
<html > 

< head> 

<title> 密 码 框 </title> 
</head> 

<body> 
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< form name = "form1" method = "post" action = "program.asp"> 
用 户 名 : < input type= "text" name= "username"><br> 
密 gnbsp;&nbsp; 码 : < input type = "password" name= "pwd"> 
</form> 
</body> 
</html > 





页 面 效 果 如 图 5-3 所 示 。 
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图 5-3 密码 框 页 面 效果 


5.2.3 隐藏 杠 


隐藏 框 是 用 来 收集 或 发 送信 息 的 不 可 见 元 素 , 对 于 网 页 的 访问 者 来 说 ,隐藏 框 是 看 不 见 
的 。 当 表单 被 提交 时 ,隐藏 框 就 会 将 信息 用 设置 时 定义 的 名 称 和 值 发 送 到 服务 器 上 。 
基本 语法 : 


<form> 
<input name =" " type = "hidden" value= " "> 
</form> 


语法 解释 : 

(1) 当 < input > 标记 的 type 属性 值 为 hidden 时 ,表示 输入 项 为 隐藏 框 将 不 在 浏览 器 中 
显示 。 

(2) 隐藏 框 由 于 不 在 页 面 中 显示 ,因此 在 表单 中 出 现 的 位 置 没有 先后 顺序 要 求 ,只 要 包 
含 在 < form > 标记 范围 内 即 可 。 
5.2.4 “提交 ”按钮 和 “ 重 置 ”按钮 

当 type 属性 值 为 submit 时 ,产生 一 个 “提交 ”按钮 , 当 用 户 单 击 该 按钮 时 ,浏览 器 就 会 
将 所 属 表 单 内 的 输入 信息 传送 给 服务 器 。 当 type 属性 值 为 reset 时 ,产生 一 个 “ 重 置 " 按 钮 ， 
当 用 户 单 击 该 按钮 时 ,浏览 器 就 会 清除 表单 中 所 有 的 输入 信息 而 恢复 到 初始 状态 。 一 般 情 
况 下 ,“ 提 交 ” 与 “ 重 置 ”按钮 经 常 同时 出 现 。 

基本 语法 : 








<form>< input name= "submit" type= "submit" value = "提交 "></form> 
< form>< input name = "reset" type = "reset" value= " 重 置 "></form> 


语法 解释 : 

(1)“ 提 交 ” 按 钮 的 name 属性 是 可 以 默认 的 。 除 name 属性 外 , 它 还 有 一 个 可 选 的 属性 
value, 用 于 指定 显示 在 “提交 ”按钮 上 的 文字 ,value 属性 的 默认 值 为 “提交 ”。 在 一 个 表单 中 
必须 有 “提交 ”按钮 ,否则 将 无 法 向 服务 器 传送 信息 。 

(2)“ 重 置 ?按钮 的 name 属性 也 是 可 以 默认 的 。value 属性 与 submit 类 似 , 用 于 指定 显 
示 在 清除 按钮 上 的 文字 ,value 的 默认 值 为 “ 重 置 。 

【 例 5-3】 一 个 常见 的 登录 页 面 实例 。 





<! -- 程序 5-3--> 

<html> 

<head> 

<title > 提交 按 钮 和 重 置 按钮 </title> 

</head> 

<body> 

<form name = "forml" method= "post" action = "program.asp"> 
用 户 名 : < input type= "text" name= "username"><br> 
密 gnbsp;&nbsp; 码 : < input type = "password" name= "pwd"><br> 
< input type = "submit" name = "Submit" value= "提交 "> 
Snbsp; &nbsp; 
< input type = "reset" name = "Reset" value = " 重 置 "><br> 

</form> 

</body> 

</html > 





表单 内 包含 一 个 用 户 名 文本 框 一 个 密码 文本 框 , 一 个 “提交 ”按钮 和 一 个 “ 重 置 "按钮 ， 
页 面 效 果 如 图 5-4 所 示 。 


当 提 交 按 银 和 重 轩 按钮 -Microsoft mter = 癌 广 
文件 (E) 编辑 查看 v) 收藏) 工具 D 大 有 >” 局 


@ 二 -上 罩 - 因 国 的 万 呈 
Oo mE 


用 户 名 ， 





图 54 登录 页 面 效果 


5.2.5 图 像 按钮 


有 时 为 了 得 到 比较 好 的 视觉 效果 ,有 人 会 使 用 图 片 代替 按钮 来 提交 或 者 重 置 表单 数据 。 
类 型 为 图 片 (type 一 "image" ) 的 按钮 ,其 默认 操作 是 提交 表单 。 
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基本 语法 : 


<form> 


< input name =" " type = "image" src=" "> 


</form> 


语法 解释 : 


单 击 该 按钮 时 ,浏览 器 就 会 将 表单 的 输入 信息 传送 给 服务 器 。image 类 型 中 的 src 属性 











是 必需 的 , 它 用 于 设置 图 像 文件 的 路 径 。 
【 例 5-4】 一 个 使 用 图 像 按 钮 的 实例 。 





<t== 程序 5=4==> 
<html> 

<head> 
<title> 图 像 按钮 </title> 
</head> 

<body> 


< form name = "forml" method= "post" action = "program.asp"> 


用 户 名 : < input type= "text" 


name= "username"><br> 


< input name = "submit" type= "image" src = "submit. gif"> 


</form> 
</body> 
</html > 





页 面 效 果 如 图 5-5 所 示 。 











写 图 像 按钮 - Microsoft Internet Explorer 
文件 
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编辑 (5) 查看) 收 大 4) I 上 (D 和 和 NH” 大 


5-5 图像 按 钮 页 面 效 果 


5.2.6 单 选 框 和 复 先 要 


当 < input > 标记 的 type 属性 


E 值 为 radio 时 ,表示 输入 项 为 一 个 单 选 框 。 





当 < input > 标记 的 type 属性 
基本 语法 : 


E 值 为 checkbox 时 ,表示 输入 项 为 一 个 复 选 框 。 


< form>< input name=" " type=" radio " value= " "></form> 
< form>< input name=" " type=" checkbox" value = " "></form> 





语法 解释 : 

(1) 当 为 单 选 框 时 , 单 选 框 必须 是 唯一 的 , 即 用 户 只 能 选中 表单 中 所 有 单 选 框 中 的 一 项 
作为 输入 信息 ,因此 ,所 有 单 选 框 的 name 属性 都 应 取 相 同 的 值 ; 不 同 的 选项 其 属性 value 
的 值 应 是 不 同 的 ; checked 属性 用 于 指定 该 选项 在 初始 时 是 被 选中 的 。 

(2) 当 为 复 选 框 时 ,用 户 可 以 同时 选中 表单 中 的 一 个 或 多 个 复 选 框 作为 输入 信息 ,由 于 
选项 可 以 有 多 个 ,属性 name 应 取 不 同 的 值 ; 属性 value 的 参数 值 就 是 在 该 选项 被 选中 并 提 
交 后 ,浏览 器 要 传送 给 服务 器 的 数据 。 因 此 ,value 属性 的 参数 值 必须 与 选项 内 容 相同 或 基 
本 相同 ,该 属性 是 必 选 项 ; checked 属性 用 于 指定 该 选项 在 初始 时 是 否 被 选中 。 

【 例 5-5】 一 个 包含 单 选 框 和 复 选 框 的 实例 。 











<! -- 程序 5-5--> 

<htm]l > 

<head> 

<title> 单 选 框 和 复 选 框 </title> 

</head> 

<body> 

< form name = "forml" method= "post" action = "program.asp"> 
性 别 : 
男 < input name = "xb" type = "radio" value = "0" checked> gnbsp; gnbsp; 
女 < input name = "xb" type= "radio" value= "1" ><br> 
爱好 : 
音乐 < input name = "ah" type = "checkbox" value = "0" > &nbsp; &nbsp; 
体育 < input name = "ah" type = "checkbox" value = "1" checked>< br > gnbsp; gnbsp; 
Snbsp; &nbsp; &nbsp; &nbsp; 美术 < input name = "ah" type = "checkbox" value= "2" > 
gnbsp;&nbsp; 计算机 < input name = "ah" type = "checkbox" value= "3" > 

</form> 

</body> 

</html > 








页 面 效果 如 图 5-6 所 示 。 
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图 5-6 单 选 框 和 复 选 框 页 面 效 果 
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5.2.7 文件 选择 输入 杠 


文件 选择 输入 框 可 以 让 用 户 在 表单 的 内 部 选择 自己 硬盘 中 的 文件 路 径 , 然 后 通过 表单 
上 传 ,这 是 文件 选择 输入 框 的 基本 功能 。 例 如 ,利用 Web 发 送 E-mail 时 常见 的 附件 功能 。 
文件 选择 输入 框 的 外 观 是 一 个 文本 框 加 一 个 “浏览 ”按钮 ,用 户 既 可 以 直接 将 要 上 传 给 网 站 
的 文件 的 路 径 输 入 文本 框 ,也 可 以 单 击 “ 浏 览 ” 按 钮 ,在 自己 的 计算 机 中 找到 要 上 传 的 文件 。 
基本 语法 : 


< form method = "post" enctype = "multipart/form - data"> 
< input name =" " type= "file" > 


</form> 

语法 解释 : 

(1) 在 表单 中 插入 文件 选择 输入 框 ,只 要 将 < input > 标记 中 type 属性 值 设 为 file 就 可 
以 插入 文件 选择 输入 框 。 


(2) < form > 标记 中 method 属性 值 只 能 是 post, 不 能 采用 get 方法 进行 上 传 。 
(3) < form > 标记 中 enctype 属性 值 的 设 定 ,确保 文件 能 够 采用 正确 的 格式 上 传 。 
【 例 5-6】 一 个 文件 上 传 的 实例 。 


== 程序 5 一 6 一 > 
< htm]l > 
<head> 
<title> 文 件 选择 框 </title> 
</head> 
<body> 
< form name = "forml" method= "post" action = "program.asp" enctype= "multipart/form— data"> 
选择 上 传 文件 : 
< input name = "wj" type= "file"> 
</form> 
</body> 
</html> 





带 有 文件 选择 输入 框 页 面 效 果 如 图 5-7 所 示 。 


与 文件 选择 框 - Microsoft Internet Explorer 二 口 又 
文件 (E) ”编辑 (E) ”查看 V) 收 诚 (a) 工具 D 大 有 >” 局 
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5-7 文件 选择 输入 框 页 面 效 果 


当 单 击 页 面 中 的 “浏览 ”按钮 时 ,就 会 弹出 一 个 “选择 文件 ”对 话 框 ,如 图 5-8 所 示 。 





品 DvDICD-RwW 弛 动 器 (H:) 














文件 名 :| 到 
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图 5-8 “选择 文件 "对话 框 


5.2.8 可 单 击 按钮 


当 type 属性 值 为 button 时 ,产生 一 个 可 单 击 按钮 。 该 按钮 的 特点 是 没有 任何 行为 。 
button 类 型 常用 于 在 用 户 单 击 按钮 时 启动 JavaScript 程序 。 
基本 语法 : 


< form>< input type= "button" value= "Click me" onclick= "msg()" /></form> 


语法 解释 : 
如 果 单 击 上 面 的 按钮 ,会 启动 一 段 JavaScript。 
【 例 5-7】 一 个 可 单 击 按钮 的 实例 。 


<1== 程序 5=7==> 
<html> 
<head> 
<title> 可 单 击 按钮 实例 </title> 
< script type = "text/javascript"> 
function msg() 
{ alert("Hello world!"); 
</ script> 
</head> 
< body> 
< form> 
< input type = "button" value = "Click me" onclick = "msg()" /> 
</form> 
<P> 如 果 单 击 上 面 的 按钮 ,会 启动 一 段 JavaScript.</p> 
</body> 
</html > 
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运行 程序 后 ,效果 如 图 5-9 所 示 。 
当 单 击 Click me 按钮 后 ,将 调用 head 中 script 的 msg() 函 数 ,会 弹出 如 图 5-10 所 示 的 
对 话 框 。 
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图 5-9 可 单 击 按钮 页 面 效 果 图 5-10 单 击 Click me 按钮 后 的 对 话 框 


5.2.9 HTMLS 新 的 Input 类 型 


HTML5 拥有 多 个 新 的 表单 输入 类 型 。 这 些 新 特性 提供 了 更 好 的 输入 控制 和 验证 。 新 
的 输入 类 型 不 同 的 浏览 器 支持 情况 不 同 。Opera 支持 最 好 。IE 浏览 器 均 不 支持 显示 。 在 
主流 的 浏览 器 中 使 用 它们 ,即使 不 被 支持 ,仍然 可 以 显示 为 常规 的 文本 域 。 

1. e-mail 类 型 

当 < input > 标记 的 type 属性 值 为 email 时 ,表示 输入 项 为 一 个 E-mail 地 址 。 

基本 语法 : 


< form>< input type = "email" name = "user_email" /></form> 


语法 解释 : 

(1) email 类 型 用 于 应 该 包含 E-mail 地 址 的 输入 域 。 在 提交 表单 时 ,会 自动 验证 email 
域 的 值 。 

(2) iPhone 中 的 Safari 浏览 器 支持 E-mail 输入 类 型 ,并 通过 改变 触摸 屏 键 盘 来 配合 它 
(添加 @ 和 . com 选项 ) 。 

【 例 5-8】 一 个 E-mail 输入 框 的 实例 。 


<1 ==; 条 序 5 二 8== 和 > 

<html> 

<head> 

<title> email 输入 框 实例 </title> 

</head> 

<body> 

< form action = "/example/html5/demo_form.asp" method= "get"> 
E-mail: < input type = "email" name = "user_email" /><br /> 

< input type = "submit" /> 





运行 程序 后 ,效果 如 图 5-11 所 示 。 


CC 全 虽 ， 窜 file:///c:， 和 自杀 树种 子 被 夫 获 品 
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Email:[ | 
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5-11 email 输入 框 页面 效 果 


2. url 类 型 
当 < input > 标记 的 type 属性 值 为 url 时 ,表示 输入 项 为 一 个 URL 地 址 。 
基本 语法 : 


<form>< input type= "url" name = "user_url" /></form> 


语法 解释 : 

(1) url 类 型 用 于 应 该 包含 URL 地 址 的 输入 域 。 在 提交 表单 时 ,会 自动 验证 url 域 
的 值 。 

(2) iPhone 中 的 Safari 浏览 器 支持 url 输入 类 型 ,并 通过 改变 触摸 屏 键盘 来 配合 它 ( 添 
加 . com 选项) 。 

【 例 5-9】 一 个 URL 输入 框 的 实例 。 





<1==" 程 序 5=9==> 

<html> 

<head> 

<title>url 输入 框 实例 </title> 

</head> 

<body> 

< form action = "/example/html5/demo_form.asp" method = "get"> 
Homepage: < input type = "url" name = "user_url" /><br /> 





< input type = "submit" /> 
</form> 


运行 程序 后 ,效果 如 图 5-12 所 示 。 
3. number 类 型 
当 < input > 标记 的 type 属性 值 为 number 时 ,表示 输入 项 的 内 容 包 含 数值 。 
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5-12 ”URL 输入 框 页 面 效 果 


基本 语法 : 


< form>< input type= "number" name = "points" min= "1" max = "10" /></form> 


语法 解释 : 

(1) number 类 型 用 于 应 该 包含 数值 的 输入 域 。 

(2) 还 能 够 设 定 对 所 接受 的 数字 的 限定 : max 规定 允许 的 最 大 值 ; min 规定 允许 的 最 
小 值 ; step 规定 合法 的 数字 间隔 (如 果 step 二 "3", 则 合法 的 数 为 一 3、0、3、6 等 ); value 规定 
默认 值 。 

(3) iPhone 中 的 Safari 浏览 器 支持 number 输入 类 型 ,并 通过 改变 触摸 屏 键 盘 来 配合 
它 ( 显 示 数 字 )。 

【 例 5-10】 一 个 包含 数值 的 输入 框 的 实例 。 


<! -- 程序 5-10--> 

<html> 

<head> 

<title> number 输入 框 实例 </title> 

</head> 

<body> 

< form action = "/example/html5/demo_form.asp" method = "get"> 
Points: < input type = "number" name= "points" min = "1" max= "10" /> 
< input type = "submit" /> 

</form> 

</body> 

</html > 





运行 程序 后 ,效果 如 图 5-13 所 示 。 
《 >》C 人 分 安 file:///c::， 多 》 自杀 树种 子 被 截获 QQ 
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图 5-13 number 输入 框 页 面 效 果 


4。range 类 型 

当 < input > 标记 的 type 属性 值 为 range 时 ,表示 输入 项 的 内 容 包 含 一 个 范围 。range 可 
以 表示 年 龄 范围 .工资 范围 人数 范 围 等 。 当 页 面 上 需要 用 户 输 入 一 个 在 一 定 范围 内 的 数字 
时 ,使 用 一 个 类 似 滑 块 控件 是 十 分 方便 的 。 一 个 典型 的 滑 块 控件 使 用 场景 就 是 颜色 选择 器 
中 用 左右 拖 虹 滑 块 来 调节 RGB 颜色 值 。 

基本 语法 : 























<form>< input type= "range" name = "points" min= "1" max= "10" /></form> 


语法 解释 : 

(1) range 类 型 用 于 应 该 包含 一 定 范围 内 数字 值 的 输入 域 。range 类 型 显示 为 滑动 条 。 

(2) 还 能 够 设 定 对 所 接受 的 数字 的 限定 : max 规定 允许 的 最 大 值 ; min 规定 允许 的 最 
小 值 ; step 规定 合法 的 数字 间隔 (如 果 step 二 "3", 则 合法 的 数 为 一 3、0、3、6 等 ); value 规定 
默认 值 。 

【 例 5-11】 一 个 包含 范围 值 的 输入 框 的 实例 。 


SEE= 可 订 5= 二 = 一 > 

< htm]l > 

<head> 

<title> range 输入 框 实例 </title> 

</head> 

<body> 

< form action = "/example/html5/demo_form.asp" method = "get"> 
Points: < input type = "range" name = "points" min= "1" max= "10" /> 
< input type = "submit" /> 

</form> 





运行 程序 后 ,效果 如 图 5-14 所 示 。 


) 从 名 窜 file:///c:: 多 》 自杀 树种 子 被 截获 QQ 
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5-14 range 输入 框 页 面 效 果 


5. Date Pickers 类 型 

Date Pickers 又 称 日 期 选择 器 。HTML5 拥有 多 个 可 供 选 取 日 期 和 时 间 的 新 输入 类 型 。 
(1) date: 选取 日 月 、 年 。 

(2) month: 选取 月 、 年 。 
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(3) week: 选取 周 和 年 。 

(4) time: 选取 时 间 ( 小 时 和 分 钟 )。 

(5) datetime: 选取 时 间 、 日 .月 .年 (UTC 时 间 )。 

(6) datetime-local: 选取 时 间 、 日 月、 年 (本 地 时 间 ) 。 

当 < input > 标记 的 type 属性 值 为 date 时 ,表示 人 允许 用 户 从 日 历 中 选取 一 个 日 期 。 
基本 语法 : 


<form>< input type= "date" name = "user_date" /></form> 


语法 解释 : 

(1) Date Pickers 包含 一 组 日 期 选择 器 。 

(2) 这 一 组 操作 均 可 以 选择 的 方式 为 选择 日 期 和 时 间 。 
【 例 5-12】 一 个 包含 date 选择 器 的 实例 。 


<! -- 程序 5-12--> 
<html> 

<head> 

<title> date 选择 器 实例 </title> 

</head> 

<body> 

< form action = "/example/html5/demo_form.asp" method = "get"> 
Date: < input type = "date" name = "user_date" /> 
< input type = "submit" /> 

</form> 

</body> 

</html > 





运行 程序 后 ,效果 如 图 5-15 所 示 。 
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5-15 data 选择 器 页 面 效 果 


专家 点 拨 : Date Pickers 中 的 其 他 类 型 可 参照 date 类 型 制作 完成 。 


5.3 ”多 行文 本 框 


用 < textarea > 标记 可 以 定义 高 度 超过 一 行 的 文本 输入 框 ,< textarea > 标记 是 成 对 标记 ， 
首 标记 < textarea > 和 尾 标记 </textarea > 之 间 的 内 容 就 是 显示 在 文本 输入 框 中 的 初始 信息 。 


< textarea > 标记 有 4 个 属性 : name、rows、cols、wrap。 


基本 语法 : 


< form> 

< textarea name = "textarea" cols="" rows="" wrap=""> 
</textarea> 

</form> 


语法 解释 : 

(1) name 属性 用 于 指定 文本 输入 框 的 名 称 。 

(2) rows 属性 用 于 设置 多 行文 本 输入 框 的 行 数 ,此 属性 的 值 是 数字 ,浏览 器 会 自动 为 
高 度 超过 一 行 的 文本 输入 框 添加 垂直 滚动 条 。 但 是 , 当 输 入 文本 的 行 数 小 于 或 等 于 rows 
属性 的 值 时 ,滚动 条 将 不 起 作用 。 

(3) cols 属性 用 于 设置 多 行文 本 输入 框 的 列 数 。 

(4) wrap 属性 默认 值 为 文本 自动 换行 , 当 输 入 内 容 超 过 文本 域 的 右边 界 时 会 自动 转 到 
下 一 行 ,而 数据 在 被 提交 处 理 时 自动 换行 的 地 方 不 会 有 换行 符 出 现 。 

如 果 希 望 启动 自动 换行 功能 (word wrapping), 就 要 将 wrap 属性 设置 为 virtual 或 
physical。 当 用 户 输 入 的 一 行文 本 长 于 文本 区 的 宽度 时 ,浏览 器 会 自动 将 多 余 的 文字 转 到 下 
一 行 。wrap 二 "virtual" 将 实现 文本 区 内 的 自动 换行 ,以 改善 对 用 户 的 显示 ,但 在 传输 给 服务 
器 时 ,文本 只 在 用 户 按 下 Enter 键 的 地 方 进行 换行 ,其 他 地 方 没有 换行 的 效果 。wrap 一 
”physical "将 实现 文本 区 内 的 自动 换行 ,并 以 这 种 形式 传送 给 服务 器 ,就 像 用 户 真 的 那样 输 
和 的。 因为 文本 要 以 用 户 在 文本 区 内 看 到 的 效果 传输 给 服务 器 ,因为 使 用 自动 换行 是 非常 
有 用 的 方法 。 如 果 把 wrap 设置 为 off ,将 会 按照 默认 值 处 理 。 

【 例 5-13】 一 个 多 行文 本 框 的 实例 。 

















<! -- 程序 5-13--> 
<html> 
<head> 
<title> 多 行文 本 框 </title > 
</head> 
<body> 
<form name = "forml" method = "post" action = "program.asp"> 
简介 : <br> 
< textarea name = "jj" cols= "20" rows = "15"> 
张九龄 (673 -740), 字 子 寿 , 韶 州 曲 江 人 。 开 元 时 期 有 名 的 宰相 ,玄宗 开元 二 十 二 年 (734) 迁 中 书 
令 。 因 李 林 青 排 挤 , 开 元 二 十 五 年 (737) 贬 为 荆州 长 史 。 他 的 诗 早年 词 采 清 丽 ， 
情 致 深 婉 , 为 诗坛 前 辈 张 说 所 激赏 。 被 贬 后 风格 转 趋 朴 素 道 劲 。 
</textarea> 
</form> 
</body> 
</html> 








页 面 效 果 如 图 5-16 所 示 。 
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5-16 多 行文 本 框 页 面 效果 


5.4 下 拉 列 表 框 


在 表单 中 ,通过 < select > 和 < option > 标记 可 以 在 浏览 器 中 设计 一 个 下 拉 式 的 列表 或 带 
有 滚动 条 的 列表 ,用 户 可 以 在 列表 中 选择 一 个 或 多 个 选项 。 这 一 点 与 < input > 标记 中 的 单 
选 框 和 复 选 框 的 使 用 方法 相似 ,只 是 形式 不 同 。 

基本 语法 : 


<form> 
< select name=" " size=" "> 


<options value=" "> 


<options value=" "> 
</select> 
</form> 


语法 解释 : 

(1) < select > 标记 是 成 对 标记 , 首 标记 < select > 和 尾 标记 </select > 之 间 的 内 容 就 是 一 
个 下 拉 式 菜单 的 内 容 。< select > 标记 必须 与 < option > 标记 配套 使 用 。< option > 标记 用 于 
定义 列表 中 的 各 个 选项 ,< select > 标记 有 name、size、multiple 3 个 属性 。name 属性 设 定 下 
拉 列 表 名 称 。size 属性 为 可 选项 ,用 于 改变 下 拉 列 表 框 的 大 小 。size 属性 的 值 是 数字 ,表示 
显示 在 列表 中 选项 的 数目 , 当 size 属性 的 值 小 于 列表 框 中 的 列表 项 数目 时 ,浏览 器 会 为 该 下 
拉 列 表 框 添加 滚动 条 ,用 户 可 以 使 用 滚动 条 来 查看 所 有 的 选项 ,size 默认 值 为 1。 如 果 加 上 


multiple 





属性 ,表示 允许 用 户 从 列表 中 选择 多 项 。 


(2) < option > 标记 用 来 定义 列表 框 中 的 选项 ,设置 列表 中 显示 的 文字 和 列表 条 目的 
值 ,列表 中 每 个 选项 有 一 个 显示 的 文本 和 一 个 value 值 (当选 项 被 选择 时 传送 给 处 理 程序 的 
信息 )。< option > 标记 是 单 标记 , 它 必须 府 套 在 < select > 标记 中 使 用 。 一 个 列表 中 有 和 多少 


个 选项 ,就 要 有 多 少 个 < option > 标记 与 之 相对 应 ,选项 的 具体 内 容 写 在 每 个 < option > 之 后 。 
< option > 标记 有 两 个 属性 : value 和 selected, 它 们 都 是 可 选项 。value 属性 用 于 设置 当 该 
选项 被 选中 并 提交 后 ,浏览 器 传送 给 服务 器 的 数据 。 如 果 是 默认 状态 ,浏览 器 将 传送 选项 的 





内 容 。selected 属性 用 来 指定 选项 的 初始 状态 ,表示 该 选项 在 初始 时 被 选中 。 
【 例 5-14】 一 个 下 拉 列 表 框 的 实例 。 





<! -- 程序 5-14--> 

<html > 

<head> 

<title> 下 拉 列 表 框 </title> 

</head> 

<body> 

< form name = "forml" method= "post" action = "program.asp"> 

喜欢 的 蔬菜 : <br> 

< select name = " sc" size= "1" > 
<option value = "0"> 白 菜 </option > 
<option value = "1"> 黄 瓜 </option> 
<option value= "2"> 甘 蓝 </option> 
<option value = "3"> 西 红 柿 </option> 
<option value = "4"> 西 葫芦 </option > 

</select> 

</form> 

</body> 

</html > 


页 面 效果 如 图 5-17 所 示 。 
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图 5-17 下 拉 列 表 框 页 面 效果 


5.5 上 机 练习 与 指导 


5.5.1 表单 实现 用 户 注 册 的 应 用 





在 构建 用 户 注册 页 面 时 ,根据 应 用 的 要 求 确定 需要 收集 用 户 哪些 信息 ,然后 根据 需要 排 


列表 单 控件 的 顺序 。 
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【 例 5-15】 一 个 用 户 注册 的 应 用 实例 。 


<l== 程序 5=15==> 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 
<title> 用 户 注册 </title > 
< style type = "text/css"> 
a 
.STYLE1 {color: 提 FF0000} 
A 
</style> 
</head> 
<body> 
<h3 align = "center"> 用 户 注册 </h3 > 
< form name = "userregister" action = "program.asp" method = "post"> 
<table border = "1" align = "center" cellpadding = "3" cellspacing = "0" bordercolor = 
" 间 999999" style= "border - collapse:collapse"> 
<tr><tdwidth= "616" colspan = "2" align = "left"> 注 : 标 < span class = "STYLE1">* 
</span> 的 为 必 填 项 </td></tr> 
< tr 
<td width= "170" align= "right"> 用 &nbsp; 户 &nbsp; 名 : </td> 
< td width = "446" align = " left">< input name = "yhm" type = "text" onKeyUp = 
"appendemail()"/> 
< span class= "STYLE1">* &nbsp; 请 使 用 您 常用 的 电子 邮箱 作为 用 户 名 </span ></td> 
</tr> 
过 
<td width = "170" align = "right"> 密 gnbsp; Snbsp; &nbsp;&nbsp; 码 : </td> 
<td align = "left">< input name = "mm" type= "password" /> 
<span class= "STYLE1">* </span></td> 
</tr> 
<tr> 
<tdwidth="170" align = "right"> 确 认 密 码 : </td> 
<td align = "left">< input name = "qrmm" type = "password" /> 
<span class = "STYLE1">* </span ></td> 
</tr> 
<tr> 
<tdwidth= "170" align= "right"> 工作 单位 : </td> 
<tdalign= "left">< input name = "gzdw" type = "text" class= "inputtext" /></td> 
</tr> 
<tr> 
<td width= "170" align= "right"> 职 务 职称 : </td> 
<tdalign= "left"> 
<select name= "zc" size="1"> 
<option value = "0"> 助 教 </option> 
<option value = "1"> 讲 师 </option> 
< option value = "2"> 副 教授 </option> 
< option value = "3"> 教 授 </option> 
</select> 


</td> 

</tr> 

“Tr 
<td width = "170" align= "right"> 国 gnbsp; gnbsp; Snbsp;&nbsp; 家 : </td> 
<td align = "left">< input name = "gj" type= "text" class = "inputtext" /> 
<span class= "STYLE1">* </span></td> 

</tr> 

< tr 
<td width = "170" align= "right"> 姓 gnbsp;&nbsp; gnbsp;&nbsp; 名 : </td> 
<td align = "left">< input name = "xm" type= "text" class = "inputtext" /> 
< span class= "STYLE1">* </span></td> 

</tr> 


<tr> 
<td width= "170" align = "right"> 性 gnbsp; gnbsp; &nbsp; &nbsp; 别 : </td> 
<td align = "left"> gnbsp; 男 < input type = "radio" name = "xb" value = "0" checked /> 
gnbsp; &nbsp; &nbsp; &nbsp; 
女 < input type = "radio" name = "xb" value = "1" /></td> 


</tr> 
<tr> 
<td width= "170" align= "right"> 电 子 邮 件 : </td> 
<tdalign= "left">< input name = "email" type = "text" class = "inputtext" /> 
<span class= "STYLE1">* </span></td> 
</tr> 
<tr> 
<td width= "170" align= "right"> 电 gnbsp; gnbsp; &nbsp; &nbsp; 话 : </td> 
<tdalign= "left">< input name = "dh" type= "text" class = "inputtext" /></td> 
</tr> 
</table> 
<center >< input name = "submit" type= "submit" value= "提交 " /> 
Snbsp; gnbsp; &nbsp; gnbsp; 
< input name = "reset" type = "reset" value = " 重 置 "> 
</center> 
</form> 
</body> 
</html > 


程序 中 表单 需要 收集 用 户 的 用 户 名 、 密 码 ,确认 密码 、 工 作 单 位 、 职 务 职 称 、 国 家 、 姓 名 、 
性 别 、 电 子 邮 件 、 电 话 等 信息 。 其 中 “密码 ”和 “确认 密码 ”为 密码 输入 框 ,“ 职 务 职称 ”为 下 拉 
列表 框 ,“ 性 别 ” 为 单 选 框 ,页 面 效 果 如 图 5-18 所 示 。 


5.5.2 表单 实现 文件 上 传 的 应 用 


表单 不 但 能 收集 文本 信息 也 能 够 实现 文件 的 上 传 功能 。 
【 例 5-16】 一 个 缴费 凭证 上 传 的 实例 , 它 实现 了 用 户 向 网 站 传输 缴费 凭证 照片 图 像 的 
功能 。 
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图 5-18 “用 户 注册 ”页 面 效 果 


< =-- 程序 5-16--> 

<html> 

<head> 

<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 
<title > 缴费 凭证 上 传 </title> 

< style type = "text/css"> 


Ee 
body{ 
font- family: 宋体 ; 
font ~ size:12px; 
1 
form { 
margin: 20px 10px; 
padding: 15px 25px 25px 20px; 
border: 1px solid #EEE8E]; 
': 
. inputtext { 
width:150px; 
height:15px; 
二 
</style> 
</head> 
<body> 


<h3 align = "center"> 缴 费 凭证 上 传 </h3> 


< form name = "forml" enctype= "multipart/form - data" action = "program.asp" method= "post"> 
<br> gnbsp;gnbsp; 姓 名 : gnbsp; gnbsp;< input name = "xm" type= "text" class = "inputtext" /> 
< br> gnbsp; snbsp; 汇 出 行 : &nbsp; &nbsp;< input name = "hch" type = "text" class = "inputtext" /> 
<br> &nbsp;&nbsp; 汇 出 日 期 : < input name = "hcrq" type = "text" class= "inputtext" /> 
<br> gnbsp;&nbsp; 图 片 文件 : < input name = "tp" type= "file" class = "inputtext" /> 
<br> gnbsp;&nbsp; 说 明 : gnbsp; &nbsp;< textarea name = "sm" rows = "10" ></textarea><br> 
<center >< input name = "submit" type= "submit" value= "提交 " /> 
gnbsp; gnbsp; &nbsp; gnbsp; 
< input name = "reset" type = "reset" value = " 重 置 "> 
</center> 
</form> 
</body> 
</html > 


程序 中 表单 需要 收集 的 表单 控件 中 ,图 片 文 件 所 在 控件 为 文件 选择 输入 框 ,说 明 所 在 控 
件 为 多 行文 本 框 ,页 面 效果 如 图 5-19 所 示 。 
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5-19 图 片 文件 上 传 页 面 效果 


5.6 本 章 习 题 


一 、 选 择 题 

1. 网 页 中 定义 表单 的 标记 是 ( 各 
A. <select> B. <table> C. <form> D. <div> 

2. < input > 标记 定义 一 个 单 选 框 ,type 属性 的 值 为 ( ys 第 
A. checkbox B. radio C. text D. hidden 2 
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3.〈 ，，) 属 性 用 于 设置 单行 文本 框 可 显示 的 最 大 字符 数 。 


A. size B. maxlength C. name D. type 
4. 以 下 标记 中 ,( ) 是 定义 下 拉 列 表 框 中 选项 的 标记 。 
A. <select> B. < caption > C. <input> D. <option> 





5. 当 type 属性 值 为 ( ) 时 ,产生 一 个 可 单 击 按钮 。 该 按钮 的 特点 是 没有 任何 行为 ， 
常用 于 在 用 户 单 击 按钮 时 启动 JavaScript 程序 。 














A. email B. url C. number D. button 
6. 当 < input > 标记 的 type 属性 值 为 ( ) 时 ,表示 输入 项 的 内 容 包含 一 个 范围 。 
A. url B. number 1 C. range D. Date Pickers 
二 、 填空 题 
1. 表单 实质 上 就 是 用 于 实现 网 页 浏览 者 和 服务 器 端 之 间 的 一 种 页 面 元 素 ,在 
WWW 上 被 广泛 用 于 各 种 信息 的 搜集 和 反馈 。 
2. 表单 中 的 每 个 控件 都 有 特定 的 名 称 , 这 个 名 称 有 效 范围 是 控件 所 在 


3.<“ form > 标记 的 method 属性 定义 表单 结果 从 浏览 器 传送 到 服务 器 的 方式 ,属性 的 参 
数值 一 般 有 两 种 : get 和 _  。 

4. 如 果 需 要 一 个 随 表 单传 送 到 客户 端 浏 览 器 的 单行 文本 框 ,希望 能 随 表 单 把 值 提交 回 
来 ,并 且 用 户 能 够 看 到 且 不 能 修改 ,只 需要 添加 一 个 属性 即 可 。 

5. < input > 标记 类 型 为 图 片 (type 二 "image") 的 按钮 , 单 击 此 按钮 默认 操作 
是 

6. 当 为 单 选 框 时 , 单 选 框 必须 是 唯一 的 , 即 用 户 只 能 选中 表单 中 所 有 单 选 框 中 的 一 项 
作为 输入 信息 ,因此 ,所 有 单 选 框 的 属性 都 应 取 相 同 的 值 。 

7. 当 表 单 中 包含 文件 选择 输入 框 时 ,< form > 标记 的 method 属性 值 只 能 是 

8. < option > 标记 如 果 设 置 了 属性 ,表示 该 选项 在 初始 时 被 选中 。 














第 6 章 CSS 样式 表 基 础 


CSS 即 层 释 样 式 表 , 它 和 HTML 一 样 ,也 是 一 种 标识 语言 ,代码 很 简单 ,需要 通过 浏览 
器 解释 执行 ,可 以 用 任何 文本 编辑 器 来 编写 。CSS 的 出 现 弥补 了 HTML 对 标记 控制 的 不 
足 , 而 且 可 将 网 页 内 容 和 样式 分 离 ,使 得 修改 网 页 的 设计 趋 于 明了 、 简 洁 ,提高 了 网 页 的 效 
率 。 正 是 由 于 CSS 使 用 简单 灵活 ,得 到 了 很 多 公司 的 青睐 和 支持 。 

本 章 主要 内 容 如 下 。 

。 Web 标准 。 

。 XHTML 的 基本 知识 。 

。 CSS 编写 基本 模式 。 

。 CSS 的 基本 语法 。 





6.1 Web 标准 


Web 标准 不 是 某 一 个 标准 ,而 是 一 系列 标准 的 集合 ,用 户 只 有 在 了 解 其 概念 之 后 ,网 页 
制作 才能 做 到 有 的 放 矢 ,在 全 局 上 把 握 各 种 技术 。 


6.1.1 Web 标准 的 基本 组 成 


Web 标准 是 很 多 网 站 表现 层 技术 标准 的 集合 ,由 著名 的 W3C 组 织 制 定 。 所 谓 表现 层 
技术 , 即 网 页 前 台 技 术 , 包 括 HTML、XHTML、CSS、JavaScript 等 。 有 了 统一 的 标准 ,才能 
保持 技术 的 稳定 发 展 ,使 网 页 表现 技术 层 能 在 任何 设备 中 正常 浏览 。 

网 页 主要 由 3 个 部 分 组 成 , 即 结构 (Structure) .表现 (Presentation) 和 行为 (Behavior)， 
因此 对 应 的 语言 标准 也 分 为 3 个 方面 。 

(1) 结构 标准 语言 : 主要 包括 XHTML 和 XML。 

(2) 表现 标准 语言 : 主要 包括 CSS。 

(3) 行为 标准 : 主要 包括 对 象 模型 及 ECMAScript。 

1. 结构 标准 语言 

结构 标准 语言 包括 XHTML 和 XML 两 个 部 分 ,XML 是 The Extensible Markup 
Language( 可 扩展 标识 语言 ) 的 缩写 ,是 一 种 扩展 式 标识 语言 。XML 设计 的 目的 是 对 
HTML 的 补充 , 它 具 有 强大 的 扩展 性 ,可 以 用 于 网 络 数据 的 转换 和 描述 ,由 于 XML 还 不 适 
合 传统 网 页 的 制作 .因此 XML 目前 多 用 于 各 种 程序 之 间 的 数据 转换 工具 。 同 时 它 具 有 简 
洁 有 效 ,易学 易 用 、 开 放 的 国际 化 标准 、 高 效 可 扩充 等 特点 。 

XHTML 是 The Extensible HyperText Markup Language( 可 扩展 的 超 文 本 标识 语言 
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的 缩写 , 它 是 基于 XML 的 标识 语言 ,是 在 HTML4.0 的 基础 上 ,用 XML 的 规则 对 其 进行 
扩展 建立 起 来 的 ,作为 今后 向 XML 过 渡 的 网 页 制作 语言 。 

2. 表现 标准 语言 

CSS 是 Cascading Style Sheets( 层 县 样式 表 ) 的 缩写 。 目 前 推荐 的 是 CSS3。CSS 标准 
建立 的 目的 是 以 CSS 进行 网 页 布局 ,控制 网 页 的 表现 。CSS 标准 布局 与 XHTML 结构 语 
言 相 结合 ,可 以 实现 表现 与 结构 分 离 ,提高 网 站 的 使 用 性 和 可 维护 性 。 

3. 行为 标准 

行为 标准 包括 DOM 和 ECMAScript 两 个 部 分 ,DOM 是 Document Object Model( 文 档 
对 象 模型 ) 的 缩写 ,是 一 种 与 浏览 器 ,平台 及 语言 的 接口 ,使 用 户 可 以 访问 页 面 其 他 的 标准 组 
件 。 简 单 理解 ,DOM 解决 了 Netscaped 的 JavaScript 和 Microsoft 的 JScript 之 间 的 冲突 ， 
给 予 Web 设计 师 和 开发 者 一 个 标准 的 方法 ,使 制作 人 可 以 更 方便 地 访问 页 面 的 数据 .表现 
层 对 象 等 。W3C 建立 的 W3C DOM 是 建立 网 页 与 Script 或 程序 语言 沟通 的 桥梁 。 它 实现 
了 访问 页 面 中 标准 组 件 的 一 种 标准 方法 。 

ECMAScript 是 ECMA(European Computer Manufactures Association) 制 定 的 标准 脚 
本 语言 ,主要 为 JavaScript 技术 。 

这 些 标 准 大 部 分 由 W3C 起 草 和 发 布 ,也 有 一 些 是 其 他 标准 组 织 制 定 的 标准 ,如 
ECMAScript 标准 。 符 合 Web 标准 的 页 面 尽量 将 Web 内 容 的 结构 、 表 现 和 行为 进行 分 离 ， 
也 可 看 作 是 表现 与 内 容 的 分 离 。 

专家 点 拨 : W3C 是 World Wide Web Consortium 的 缩写 ,意思 是 W3C 理事 会 或 万 维 
网 联盟 。W3C 组 织 是 对 网 络 标准 制定 的 一 个 非 营利 组 织 , 像 HTML、XHTML、CSS、XML 
的 标准 就 是 由 W3C 来 制定 的 。 


6.1.2 建立 Web 标准 的 目的 与 好 处 


传统 的 网 页 布局 (使 用 table 进行 布局 ) 已 经 有 很 长 的 历史 和 比较 成 熟 的 技术 规范 了 。 
但 是 仍然 存在 一 些 缺 点 。 由 于 页 面 的 内 容 和 修饰 没有 分 离 ,导致 修改 的 困难 ; 由 于 页 面 代 
码 的 语义 不 明确 ,导致 数据 利用 的 困难 。 使 用 CSS 进行 网 页 布局 ,分 离 了 结构 和 表现 ,上 述 
问题 也 就 迎刃而解 了 。 

1. 建立 Web 标准 的 目的 

建立 Web 标准 的 目的 是 解决 网 站 中 由 于 浏览 器 升级 .网 站 代码 元 余 、 腾 肿 等 带 来 的 问 
题 。Web 标准 是 在 W3C 的 组 织 下 建立 的 ,主要 有 以 下 几 个 目的 。 

(1) 简化 了 代码 ,从 而 降低 了 成 本 。 

(2) 实现 了 结构 和 表现 分 离 ,所 以 确保 了 任何 网 站 文档 的 长 期 有 效 性 。 

(3) 可 以 简单 地 调用 不 同 的 样式 文件 ,所 以 使 得 网 站 更 易 使 用 ,适合 更 多 的 用 户 和 网 络 
设备 。 

(4) 实现 了 向 后 兼容 ,即使 当 浏 览 器 版 本 更 新 ,或 者 出 现 新 的 网 络 交互 设备 时 ,所 有 应 
用 能 够 继续 正确 执行 。 

2. 使 用 Web 标准 的 好 处 

使 用 Web 标准 最 大 的 好 处 就 是 大 大 缩减 了 页 面 代 码 , 提 高 了 浏览 速度 ,缩减 了 宽带 成 
本 。 由 于 结构 清晰 ,能 使 网 页 更 容易 被 搜索 引擎 搜索 到 。 具 体 的 好 处 体现 在 以 下 两 方面 。 





1) 对 网 站 拥有 者 的 好 处 

(1) 代码 更 简洁 ,组 件 用 得 更 少 ,所 以 维护 也 更 加 便捷 。 

(2) 页 面 结构 更 清晰 ,使 搜索 引擎 的 搜索 更 加 容易 。 

(3) 对 宽带 要 求 降低 ,从 而 节约 了 成 本 。 

(4) 实现 了 结构 和 表现 分 离 ,使 得 修改 页 面 外 观 更 容易 操作 ,同时 不 改变 页 面 内 容 。 
(5) 页 面 结构 清晰 合理 ,也 提高 了 网 站 的 易 用 性 。 

2) 对 浏览 者 的 好 处 

(1) 清晰 的 语义 结构 ,使 得 内 容 能 够 被 更 多 的 用 户 浏览 .访问 。 

(2) 页 面 宛 余 代码 减少 ,下 载 文件 速度 更 快 ,同时 页 面 显示 的 速度 也 更 快 。 

(3) 由 于 结构 和 表现 分 离 ,因此 内 容 能 够 被 更 多 的 设备 访问 ,如 打印 机 、 手 机 等 。 
(4) 独立 的 样式 文件 ,可 以 使 用 户 更 加 容易 地 选择 自己 喜欢 的 界面 。 


6.1.3 Web 标准 与 浏览 器 的 兼容 性 


W3C 对 标准 的 推进 ,Firefox、Chrome、Safari、Opera 的 出 现 ,结束 了 IE 雄霸 天 下 的 日 
子 。 然 而 这 对 开发 者 来 说 ,是 好 事 , 也 是 坏事 。 说 它 是 好 事 , 是 因为 浏览 器 厂商 为 了 取得 更 
多 的 市 场 份额 ,会 促使 各 浏览 器 更 符合 W3C 标准 ,而 得 到 更 好 的 兼容 性 ,并 且 不 同 浏览 器 
的 扩展 功能 对 W3C 标准 也 是 个 推进 ; 说 它 是 坏事 ,是 因为 多 个 浏览 器 同时 存在 ,这 些 浏览 
器 在 处 理 一 个 相同 的 页 面 时 ,表现 有 时 会 有 差异 。 这 种 差异 可 能 很 小 ,甚至 不 会 被 注意 到 ; 
也 可 能 很 大 ,甚至 造成 在 某 个 浏览 器 下 无 法 正常 浏览 。 一 般 把 引起 这 些 差 异 的 问题 统称 为 
“浏览 器 兼容 性 问题 ”。 从 浏览 器 内 核 的 角度 来 看 ,浏览 器 兼容 性 问题 可 分 为 以 下 3 类 。 

(1) 泻 染 相 关 : 和 样式 相关 的 问题 , 即 体现 在 布局 效果 上 的 问题 。 

(2) 脚本 相关 : 和 脚本 相关 的 问题 ,包括 JavaScript 和 DOM 等 方面 的 问题 。 对 于 某 些 
浏览 器 的 功能 方面 的 特性 ,也 属于 这 一 类 。 

(3) 其 他 类 别 : 除 以 上 两 类 问题 外 的 功能 性 问题 ,一般 是 浏览 器 自身 提供 的 功能 ,是 在 
内 核 层 之 上 的 。 

正 是 这 些 * 浏 览 器 兼容 性 问题 ”无 形 中 给 网 站 的 开发 增加 了 不 少 难度 。 虽 然 Web 标准 
很 强大 ,但 还 未 得 到 全 面 的 推广 ,业界 相差 软件 兼容 性 还 在 完善 之 中 。 特 别 是 和 浏览 者 息 息 
相关 的 浏览 器 ,目前 还 没有 一 款 浏 览 器 能 完全 支持 Web 标准 ,所 以 在 编写 符合 Web 标准 的 
页 面 时 ,要 充分 考虑 浏览 器 的 兼容 性 ,在 兼容 性 与 Web 标准 之 间 做 好 平衡 。 


6.2 XHTML 与 CSS 
前 面 已 经 学 习 了 HTML 技术 ,作为 符合 Web 标准 的 网 页 制作 :XHTML 是 今后 页 面 
结构 编写 的 主流 技术 ,而 在 页 面 表现 方面 ,首选 CSS 技术 。 
6.2.1 XHTML 的 基本 知识 


2000 年 年 底 , 国 际 W3C 组 织 公 布 发 行 了 XHTML1. 0 版 本 ,这 是 一 种 在 HTML4. 0 基 
础 上 优化 和 改进 的 新 语言 ,目的 是 基于 XML 应 用 。XHTML 是 一 种 增强 了 的 HTML, 它 | 第 
的 可 扩展 性 和 灵活 性 将 适应 未 来 网 络 应 用 更 多 的 需求 。 由 于 HTML 结构 混乱 ,条理 不 清 | 章 








CSS 样式 表 基 础 


Web 前 误 证 计 与 开发 一 一 HTML5 十 CSS3 十 JavaScript 微 课 版 





晰 ,样式 与 结构 没有 分 离 , 因 此 符合 Web 标准 的 网 页 结构 推荐 使 用 XHTML。 

XHTML 是 HTML 的 升级 版 ,侧重 点 在 于 对 网 页 结构 的 设计 ,其 语法 严谨 ,有 语义 ,而 
且 页 面 的 样式 部 分 即 表现 部 分 由 CSS 负责 。 

与 HTML 相 比 ,XHTML 主要 有 以 下 特点 。 

(1) XHTML 解决 了 HTML 语言 所 存在 的 严重 制约 其 发 展 的 问题 。HTML 发 展 到 今 
天 存在 3 个 主要 缺点 ,第 一 ,不 能 适应 现在 更 多 的 网 络 设备 和 应 用 的 需要 ,如 手机 、PDA, 信 
息 家 电 都 不 能 直接 显示 HTML; 第 二 ,由 于 HTML 代码 不 规范 、 爱 肿 , 浏 览 器 需要 足够 知 
能 和 庞大 才能 够 正确 显示 HTML; 第 三 ,数据 与 表现 混杂 ,这 样 的 页 面 要 改变 显示 ,就 必须 
重新 制作 HTML。 因 此 HTML 需要 发 展 才能 解决 这 个 问题 ,于 是 W3C 又 制定 了 
XHTML,XHTML 是 HTML 向 XML 过 渡 的 一 个 桥梁 。 

(2) XML 是 Web 发 展 的 趋势 ,所 以 人 们 急切 地 希望 加 入 XML 的 潮流 中 。XHTML 是 
当前 蔡 代 HTML4. 0 标记 语言 的 标准 ,使 用 XHTML1.0, 只 要 遵守 一 些 简单 规则 ,就 可 以 
设计 出 既 适 合 XML 系统 ,又 适合 当前 大 部 分 HTML 浏览 器 的 页 面 。 

(3) 使 用 XHTML 的 另 一 个 优势 是 它 非常 严密 。 当 前 网 络 上 的 HTML 的 不 兼容 情况 
让 人 震惊 ,早期 的 浏览 器 接受 私有 的 HTML 标签 ,所 以 人 们 在 页 面 设 计 完 毕 后 必须 使 用 各 
种 浏览 器 来 检测 页 面 ,查看 是 否 兼 容 ,往往 会 有 许多 莫名 其 妙 的 差异 ,人 们 不 得 不 修改 设计 
以 便 适 应 不 同 的 浏览 器 。 

(4) XHTML 能 与 其 他 基于 XML 的 标记 语言 应 用 程序 及 协议 进行 良好 的 交互 工作 。 

(5) XHTML 是 Web 标准 家 族 的 一 部 分 ,能 很 好 地 应 用 在 无 线 设备 等 其 他 用 户 代 
理 上 。 

(6) 在 网 站 设计 方面 ,XHTML 可 帮助 设计 者 去 掉 表 现 层 代 码 的 恶习 ,帮助 设计 者 养 成 
标记 校 验 来 测试 页 面 工作 的 习惯 。 

专家 点 拨 : XHTML 是 一 种 为 适应 XML 而 重新 改造 的 HTML。 当 XML 越 来 越 成 为 
一 种 趋势 ,就 出 现 了 这 样 一 个 问题 “如 果 有 了 XML ,是否 依然 需要 HTML?” 答 案 是 “需要 ”。 
因为 人 们 已 经 习惯 使 用 HTML 来 作为 他 们 的 设计 语言 ,而 且 已 经 有 数 以 百 万 计 的 页 面 是 
采用 HTML 编写 的 。 


6.2.2 XHTML 中 的 元 素 


XHTML 和 HTML 的 差别 并 不 大 ,但 是 标签 编写 更 严格 ,更 有 语义 。 在 代码 方面 ， 
HTML 文件 的 声明 代码 为 < html ></html>, 所 有 的 HTML 元 素 包 含 其 中 ,XHTML 的 相 
应 代码 为 ， 








<! DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 transitional//EN" 
"http://www. w3.org/TR/xhtml1/DTD/xhtml1 - transitional. dtd"> 
< html xmlns = "http://www. w3. org/1999/xhtml"> 


这 段 代码 也 称 为 DOCTYPE 声明 , 即 文档 类 型 声明 ,其 中 的 transitional 代表 使 用 过 渡 
型 的 XHTML 规则 , 即 和 HTML 相 兼 容 , 人 允许 使 用 HTML 标签 ,这样 便 于 制作 者 向 严格 的 
XHTML 规则 过 渡 ,如 果 把 transitional 更 换 为 strict, 则 代表 使 用 严格 的 XHTML 规则 , 当 
使 用 框架 页 面 时 , 需 把 transitional 更 换 为 frameset 。 


专家 点 拨 : 这 段 代 码 比 较 长 ,很 难 记 ,推荐 使 用 Dreamweaver 创建 新 文档 ,文档 类 型 选 
择 XHTML1.0 transitional, 这 样 XHTML 的 DOCTYPE 声明 将 自动 编写 。 

XHTML 中 的 元 素 和 HTML 的 元 素 很 相近 ,关于 HTML 的 元 素 , 之 前 做 过 详细 的 讲 
解 ,所 以 这 里 就 把 在 XHTML 中 将 会 经 常用 到 的 元 素 大 体 介绍 。 

1. 文档 结构 

XHTML 的 文档 结构 和 HTML 是 一 样 的 ,定义 文档 开始 和 结束 时 使 用 HTML 元 素 。 
页 面 同样 分 为 head 和 body 两 部 分 ,其 中 head 部 分 的 内 容 是 不 显示 在 页 面 上 的 ,head 部 分 
还 包括 meta 和 title 等 元 素 , 这 些 在 以 后 的 学 习 中 会 详细 讲解 。 

2. 文本 基础 元 素 

文本 基础 元 素 包 括 div、p、strong、b、span,br, 标 题 等 元 素 。 

(1) div: 块 元 素 , 可 以 将 文档 分 成 不 同 的 部 分 ,可 以 使 用 class 和 id 属性 进一步 控制 页 
面 表现 。div 元 素 是 CSS 布局 中 使 用 比较 多 的 元 素 。 

(2) p: 块 元 素 ,表示 段 落 。 

(3) strong: 内 联 元 素 ,使 文本 以 粗 体 显示 。 

(4) b: 内 联 元 素 ,显示 效果 为 文本 加 粗 。 

(5) span: 内 联 元 素 ,用 来 区 分 文本 中 的 一 个 部 分 。 

(6) br: 使 文本 换行 显示 。 

(7) 标题 : 块 元 素 , 用 来 定义 文本 中 的 各 种 标题 。 包 括 列 元 素 hl、h2、h3、h4、h5、h6, 其 
中 每 个 元 素 对 应 默认 的 字体 ,如 下 面 一 段 代码 中 可 显示 使 用 标题 元 素 的 示例 。 


<hl > hl 文本 </hl > 
<h2 > h2 文本 </h2 > 
<h3a > h3 文本 </h3 > 
<h4 > h4 文本 </h4> 
<h5 > h5 文本 </h5 > 
<h6 > h6 文本 </h6 > 


其 默认 的 显示 效果 如 图 6-1 所 示 。 




















3. 列表 元 素 hl 文本 

(1) ul; 块 元 素 , 定 义 一 个 无 序列 表 。 ha 文本 

(2) li 块 元 素 ,定义 列表 中 具体 的 条 目 。 

4. 分 隔 线 ,图像 等 修饰 元 素 be 文本 

(1) bgsound : 用 来 添加 背景 音乐 。 h4 文 本 

(2) hr 块 元 素 , 用 来 分 隔 页 面 的 各 个 部 分 。 hs 文本 

(3) img: 内 联 元 素 ,用 来 插入 图 像 文件 。 he 本 

5. 链接 元 素 a 
as 内 联 元 素 ,用 来 定义 页 面 中 的 超级 链接 。 站 
6. 表格 元 素 


(1) table: 定义 一 个 表格 。 
(2) tr: 定义 表格 中 的 行 。 
(3) td: 定义 表格 中 的 单元 格 。 
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7. 表单 元 素 

(1) form: 定义 一 个 表单 ,同时 定义 处 理 表单 的 服务 器 等 。 

(2) input: 用 来 定义 通常 的 表单 控件 ,如 输入 文本 。 

与 HTML 不 一 样 ,XHTML 对 大 小 写 是 敏感 的 ,< title > 和 < TITLE > 是 不 同 的 标记 。 
XHTML 要 求 所 有 的 标记 和 属性 的 名 称 都 必须 使 用 小 写 。 例 如 ,< BODY > 必须 写成 < body >、 
< table WIDTH 二 "100%"> 必 须 写成 < table width 二 "100%">。 

以 前 在 HTML 中 ,标记 即使 没有 被 关闭 也 可 以 在 某 些 浏览 器 中 正确 运行 ,如 < p> 和 < li> 
不 一 定 写 对 应 的 </p > 和 </1li> 来 关闭 它们 ,但 在 XHTML 中 这 是 不 合法 的 。XHTML 要 求 
有 严谨 的 结构 ,所 有 标记 必须 关闭 。 如 果 是 单独 不 成 对 的 标记 ,在 标记 最 后 加 一 个 “/” 来 关 
闭 它 。 例 如 : 


< img height = "80" alt = "网 页 设计 师 " src = "logo001.gif" width = "200"/> 


XHTML 要 求 有 严谨 的 结构 ,因此 所 有 的 赃 套 都 必须 按 顺 序 ,以 前 用 HTML 这 样 写 的 
代码 : 


<p><b> 欢 迎 大 家 访问 </p></b> 
<p><b> 欢 迎 大 家 访问 </b></p> 


也 就 是 说 ,一 层 一 层 的 嵌 套 必 须 严格 对 称 。 
6.2.3 CSS 概述 


在 页 面 显 示 的 过 程 中 ,有 很 多 的 样式 作用 在 页 面 元 素 上 ,这 些 样式 来 自 不 同 的 地 方 。 浏 
览 器 自己 有 默认 的 样式 ,网 页 作者 有 自己 编写 的 样式 ,用 户 也 可 能 有 自己 的 样式 ,但 是 最 终 
显示 的 样式 是 其 中 之 一 ,它们 之 间 产 生 了 冲突 ,CSS 通过 一 个 称 为 “ 层 释 ”的 过 程 处 理 这 种 
冲突 。CSS 语言 是 一 种 标记 语言 , 它 不 需要 编译 ,可 以 直接 由 浏览 器 解释 执行 ,属于 浏览 器 
解释 型 语言 ,在 标准 网 页 设计 中 CSS 负责 网 页 内 容 的 表现 。 

层 琶 给 每 个 规则 分 配 一 个 重要 度 ,作者 的 样式 表 被 认为 是 最 重要 的 ,其 次 是 用 户 的 样式 
表 , 最 后 是 浏览 器 或 用 户 代 理 使 用 的 默认 样式 表 。 为 了 让 用 户 有 更 多 的 控制 能 力 , 可 以 通过 
将 任何 规则 指定 为 !important 来 提高 它 的 重要 度 . 让 它 优 先 于 任何 规则 ,甚至 优先 于 作者 
加 上 !important 标志 的 规则 。 因 此 , 层 又 采用 以 下 重要 度 次 序 : 

标 为 1important 的 用 户 样式 > 标 为 !1important 的 作者 样式 > 作者 样式 > 用 户 样 式 > 浏览 
器 /用 户 代 理应 用 的 样式 

然后 ,根据 选择 器 的 特殊 性 决定 规则 的 次 序 。 具 有 更 特殊 选择 器 的 规则 优先 于 具有 比 
较 一 般 的 选择 器 的 规则 。 如 果 两 个 规则 的 特殊 性 相同 ,那么 后 定义 的 规则 优先 。 由 此 可 见 ， 
层 伙 是 指 不 同 的 优先 级 的 构成 的 层 的 又 加 。 

CSS3 是 CSS 的 升级 版 本 ,这 套 新 标准 提供 了 更 加 丰富 且 实 用 的 规范 ,如 盒子 模型 、 列 








表 模 块 . 超 链接 方式 .语言 模块 .背景 和 边框 文字 特效 多 栏 布 局 等 ,目前 有 很 多 浏览 器 已 经 
相继 支持 这 项 升级 的 规范 ,如 Firefox Chrome Safari .Opera 等。 在 Web 开发 中 采用 CSS3 
技术 将 会 显著 地 美化 设计 的 应 用 程序 ,提高 用 户 体验 ,同时 也 能 极 大 地 提高 程序 的 性 能 。 
CSS3 将 完全 向 后 兼容 , 它 只 是 增加 了 一 些 新 的 选择 器 和 属性 ,这 些 会 允许 实现 新 的 设计 效 
果 ( 如 动态 和 渐变 ) ,而 且 可 以 很 简单 地 设计 出 目前 流行 的 效果 (如 使 用 分 栏 ) 。 


6.2.4 XHTML 十 CSS 实现 样式 与 结构 分 离 


由 XHTML 二 CSS 制作 网 页 通常 符合 Web 标准 的 内 容 与 表现 分 离 , 而 XHTML 十 CSS 
常 被 外 界 称 为 DIV 十 CSS, 实 际 上 是 不 严谨 的 ,XHTML + 
CSS 制作 的 网 页 ,其 各 要 素 关 系 如 图 6-2 所 示 。 





























在 图 6-2 中 ,把 页 面 所 需 的 页 面 数据 通过 XHTML 结 Web 页 面 
构 化 ,然后 用 CSS 对 XHTML 的 样式 表现 进行 控制 ,这 样 CSS 
大 体 上 完成 了 页 面 的 内 容 与 表现 的 分 离 。 

XHTML 
6.2.5 CSS 布局 与 表格 布局 的 分 析 
信息 数据 

















在 传统 的 网 页 中 ,常用 表格 对 页 面 整体 进行 布局 ,在 
本 书 前 面 的 HTML 技术 部 分 也 进行 了 详细 的 学 习 , 先 看 
一 个 简单 表格 布局 的 例子 。 

【 例 6-1】 创建 一 个 网 页 文件 。 其 代码 如 下 : 











图 6-2 XHTML 十 CSS 网 页 关系 


<! -程序 6-1.html --> 
<html> 
<head> 
<title> 简 单 表 格 布局 </title> 
</head> 
< body topmargin = "0"> 
<table width= "400" border = "0" align = "center" cellpadding = "0" cellspacing= "0"> 
< 
<td height = "20" valign= "top" bgcolor =" 井 cccccc"> 
<font color =" 井 0000ff">< strong > 顶部 </strong></font > 
</td> 
</tr> 
<tr> 
<td> 
<table width= "100%" border = "0" cellpadding = "0" cellspacing= "0"> 
<tr> 
<tdwidth="25%" height = "120" valign = "top" bgcolor = " 井 eeeeee"> 
< font color=" 间 ff0000"> 列 表 </font > 
</td> 
<tdwidth="75%" height = "120" valign = "top" bgcolor = " 井 人 7f7f7"> 
< font color=" 间 ff0000"> 内 容 </font> 
</td> 第 
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</table> 
</td> 
</tr> 
tL 
<td height = "20" valign= "top" bgcolor = "#cccccc"> 
<font color=" 间 0000ff">< strong > 底部 </strong ></font > 
</td> 
</tr> 
</table> 
</body> 
</html > 





上 述 代 码 的 浏览 效果 如 图 6-3 所 示 。 





/简单 表格 布局 - Windows Internet Explorer [| 口 | 区 | 
文件 @) 编辑 个) 查看 WD 收 基 天 4) 工具 GD) 帮助 人 0 


DO 司 ;rts\ 程 序 6-1 htal 国 [tr x | 起 cv 
请 收 关 夹 。| 着 简单 表格 机 局 | 僵 " 图 -日 





» 








图 6-3 简单 表格 布局 浏览 效果 


专家 点 拨 : 本 例 中 部 分 代码 功能 在 HTML5 中 已 停 用 ,将 利用 XHTML 十 CSS 的 形式 
实现 。 
将 程序 6-1 改编 成 XHTML 十 CSS 格式 的 代码 如 下 : 


<! -- 程序 6- 2.html --> 
<html > 
< head > 
<meta http— equiv = "Content - TYpe"” content = "text/html; charset = gb2312" /> 
<title> XHTML + CSS 简单 布局 </title> 
< style type = "text/css"> 
x {margin:Opx; 
padding: 0px; } 
#all{width:400px; 
margin:0px auto; 
color: #f00; } 
井 top, 井 bt{height:20px; 
background - color: 井 ccc; 
color: 提 00f; 
font - weight :bold;} 





提 list{width:25 %; 
height:120px; 
float: left; 
background — color: # eee;} 
提 content{width:75%; 
height:120px; 
background — color: ##f7f7f7;} 
</style> 
</head> 
<body> 
<div id= "all"> 
<div id= "top"> 顶 部 </div> 
<div id= "mid"> 
<div id= "list"> 列 表 </div> 
<div id= "content"> 内 容 </div> 
</div> 
<div id= "bt"> 底 部 </div> 
</div> 
</body> 
</html > 


通过 分 析 程 序 6-1 和 程序 6-2 的 代码 可 见 ,在 布局 效果 一 样 的 情况 下 ,表格 布局 导致 结 
构 与 样式 杂 浆 在 一 起 ,条理 混 乱 ,不 易 维护 ,而 XHTML 十 CSS 布局 则 将 内 容 与 样式 做 了 分 
离 ,代码 的 重用 性 较 高 ,很 利于 维护 与 修改 。 

正 是 因为 代码 的 重用 性 高 ,所 以 在 大 多 数 合格 的 网 页 代码 编写 中 ,使 用 XHTML 十 CSS 
布局 比 单纯 使 用 传统 的 HTML 表格 布局 要 简洁 得 多 。 

专家 点 拨 : 表格 虽然 不 提倡 用 作 布 局 ,但 并 不 代表 XHTML 将 排斥 表格 的 使 用 ,只 是 
在 需要 显示 表格 型 数据 时 使 用 表格 标签 , 即 把 表格 用 于 合适 的 地 方 ,不 滥用 ,保持 结构 的 
清晰 。 








6.3 CSS 编写 基本 模式 


由 于 CSS 在 布局 ,样式 控制 方面 有 着 巨大 的 优势 ,因此 CSS 成 了 美化 页 面 的 最 佳 利器 ， 
本 节 所 要 介绍 的 CSS 的 编写 模式 ,虽然 是 简单 的 CSS 基础 ,但 对 于 页 面 的 样式 控制 来 说 非 
常 关键 。 


6.3.1 CSS 的 插入 形式 


在 网 页 中 插入 CSS 样式 表 后 ,要 想 在 浏览 器 中 显示 出 效果 ,就 要 让 浏览 器 识别 并 调用 。 
当 浏览 器 读 取样 式 表 时 ,要 依照 文本 格式 来 读 取 , 这 里 介绍 4 种 在 页 面 中 插入 样式 表 的 方 
法 : 链 入 外 部 样式 表 、 内 部 样式 表 、. 导 入 外 部 样式 表 和 内 论 样 式 。 

1. 链 人 外 部 样式 表 

链 入 外 部 样式 表 是 要 先 把 样式 表 保 存 为 一 个 单独 的 文件 ,然后 在 页 面 中 用 < link > 标记 
链接 到 这 个 文件 .注意 这 个 < link > 标记 必须 放 到 页 面 的 < head > 区 内 ,其 语法 格式 如 下 : 
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< head> 
和 href = "mystyle. css" rel = "stylesheet" type = "text/css" media = "all"> 

hong> 

语法 解释 : 

(1) href: 用 于 指定 样式 表 文件 所 在 的 地 址 ,可 以 是 绝对 地 址 或 相对 地 址 ,如 上 面 代 码 
中 的 “mystyle. css” ,表示 浏览 器 从 mystyle. css 文件 中 以 文档 格式 读 出 定义 的 样式 表 。 
样式 表 文 件 可 以 用 任何 文本 编辑 器 (如 记事 本 ) 打 开 并 编辑 ,扩展 名 为 . css。 内 容 是 定 
义 的 样式 表 ,注意 不 能 包含 有 任何 的 HTML 标记 ,如 在 mystyle. css 文件 中 定义 水 平 线 的 


颜色 为 土 黄 ; 段落 左边 的 空白 边 距 为 20 像素 ; 页 面 的 背景 图 片 为 images 目录 下 的 
back40. gi 文件 ,具体 代码 如 下 : 





hr {color: sienna} 
p {margin— left: 20px} 
body {background - image: url("images/back40.gif")} 


(2) rel 二 "stylesheet"; 指 在 HTML 页 面 文件 中 使 用 的 是 外 部 样式 表 。 

(3) type 二 "text/css": 指明 该 文件 的 类 型 是 样式 表 文 件 。 

(4) media: 选择 媒体 类 型 ,这 些 媒体 包括 屏幕 ,纸张 .语音 合成 设备 、 盲 文 阅读 设备 等 。 

CSS 文件 要 和 HTML 页 面 文件 一 起 发 布 到 服务 器 上 ,这 样 在 使 用 浏览 器 打开 网 页 时 ， 
浏览 器 会 按照 该 HTML 网 页 所 链接 的 外 部 样式 表 来 显示 其 风格 。 

一 个 外 部 样式 表 文 件 可 以 应 用 于 多 个 页 面 , 当 改变 这 个 样式 表 文件 时 ,所 有 页 面 的 样式 
都 会 随 之 改变 。 在 制作 大 量 相同 样式 页 面 的 网 站 时 这 种 方法 非常 有 用 ,不 仅 减少 了 重复 的 
工作 量 , 而 且 有 利于 以 后 的 修改 和 编辑 ,有 利于 站 点 的 维护 。 同 时 在 浏览 网 页 时 一 次 性 将 样 
式 表 文 件 下 载 ,减少 了 代码 的 重复 下 载 。 

2. 内 部 样式 表 

内 部 样式 表 通 过 < style > 标记 把 样式 表 的 内 容 直接 放 到 HTML 页 面 的 < head > 区 内 ， 
这 些 定义 的 样式 就 应 用 到 页 面 中 了 ,样式 表 是 用 < style > 标记 插入 的 ,其 语法 格式 如 下 : 





<head> 
< style type = "text/css"> 
<! -- 
选择 符 { 样 式 属性 : 取 值 ;样式 属性 : 取 值 ; …} 
选择 符 { 样 式 属性 : 取 值 ;样式 属性 : 取 值 ; …} 


--> 
</style> 
</head> 


语法 解释 : 
(1) < style > 标记 : 用 来 说 明 所 要 定义 的 样式 。 


(2) type 一 "text/css" : 说 明 这 是 一 段 CSS 样式 表 代 码 。 

(3) <! 一 与 瑟 标 记 : 有 些 低 版 本 的 浏览 器 不 能 识别 < style > 标记 ,这 意味 着 低 版 本 的 浏 
览 器 会 忽略 < style > 标记 中 的 内 容 , 并 把 < style > 标记 中 的 内 容 以 文本 直接 显示 到 页 面 上 。 
该 标记 的 加 入 就 是 为 了 防止 一 些 不 支持 CSS 的 浏览 器 ,将 < style > 与 </style > 之 间 的 CSS 
代码 当成 普通 的 字符 串 显示 在 网 页 中 。 

(4) 选择 符 : 即 样式 的 名 称 ,可 以 选用 HTML 标记 的 所 有 名 称 。 

例如 ,将 上 面 的 mystyle. css 文件 直接 定义 在 页 面 中 的 代码 如 下 : 


<head> 


< style type = "text/css"> 
< 一 
hr {color: sienna} 
p {margin— left: 20px} 
body {background — image: url("images/back40.gif")} 
-> 
</style> 


</head> 


内 部 样式 表 方 法 就 是 将 所 有 的 样式 表 信 息 都 列 于 HTML 文件 的 头 部 ,因此 这 些 样式 
可 以 在 整个 HTML 文件 中 调用 。 如 果 想 对 网 页 一 次 性 加 入 样式 表 , 则 可 选用 该 方法 。 
3. 导 人 外 部 样式 表 
导入 外 部 样式 表 是 指 在 内 部 样式 表 的 < style > 区 域内 导入 一 个 外 部 样式 表 , 导 入 时 需 
要 用 @import 做 声明 ,该 声明 可 放 在 < head > 标记 外 也 可 以 放 在 < head > 标记 内 ,但 根据 语 
法 规则 ,一 般 都 是 放 在 < head > 标记 内 ,其 语法 格式 如 下 : 
<head> 
<style type = "text/css"> 
@import url( 外 部 样式 表 文 件 地 址 ); 
</stytle> 
ri 
语法 解释 : 
import 语句 后 面 的 “; “是 不 可 省 略 的 ,样式 表 地 址 可 以 是 绝对 地 址 ,也 可 以 是 相对 
地 址 。 


外 部 样式 表 文 件 的 文件 扩展 名 必须 为 . css。 例 如 ,导入 mystyle. css 样式 表 的 代码 
如 下 : 


<head> 


< style type = "text/css"> 
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ER 
@ import "mystyle.css" 
其 他 样式 表 的 声明 
== 交 
</style> 


</head> 


导入 外 部 样式 表 的 方法 和 链 入 样式 表 的 方法 很 相似 ,但 导入 外 部 样式 表 输 入 方式 更 有 
优势 。 实质 上 它 相 当 于 存在 内 部 样式 表 中 。 但 在 使 用 中 , 某 些 浏览 器 可 能 会 不 支持 导 人 外 
部 样式 表 的 @import 声明 ,所 以 此 方法 不 经 常用 到 。 

专家 点 拨 : 导入 外 部 样式 表 必 须 在 样式 表 的 开始 部 分 ,在 其 他 内 部 样式 表 上 面 。 

4. 内 肉 样 式 

内 和 嵌 样 式 是 混合 在 HTML 标记 中 使 用 的 , 即 在 < body > 标记 中 加 入 style 参数 。 而 
style 参数 的 内 容 就 是 CSS 的 属性 和 值 ,用 这 种 方法 ,可 以 很 简单 地 对 某 个 元 素 单独 定义 样 
式 。 其 语法 格式 如 下 : 


<head> 
es 
<body> 
ee 标记 style= "样式 属性 : 取 值 ;样式 属性 : 取 值 ; … "> 
a 


语法 解释 : 

(1) HTML 标记 就 是 页 面 中 标记 HTML 元 素 的 标记 ,如 body、p 等 。 

(2) style 参数 后 面 引号 中 的 内 容 就 相当 于 样式 表 大 括号 中 的 内 容 。 需 要 指出 的 是 ， 
style 参数 可 以 应 用 于 HTML 文件 中 任意 的 < body > 标记 (包括 body 本 身 ), 以 及 除了 
basefont、param 和 script 之 外 的 任意 元 素 。 

综合 以 上 CSS 的 插入 方法 ,在 使 用 中 各 有 各 的 特殊 之 处 ,推荐 使 用 第 一 种 链 入 外 部 样 
式 表 的 方法 ,使 表现 (CSS) 和 内 容 (XHTML) 真 正 分 离 。 对 于 多 个 页 面 共 同调 用 同一 个 
CSS 文 档 时 ,每 个 页 面 独立 的 样式 部 分 还 是 使 用 内 部 样式 表 , 内 部 样式 表 的 优先 性 高 于 外 
部 样式 表 , 遇 到 特殊 情况 也 会 需要 使 用 内 嵌 样 式 表 , 内 榜样 式 表 的 优先 性 又 高 于 内 部 样式 
表 。 总 之 当 4 种 方法 同时 使 用 时 ,浏览 器 会 选择 优先 级 最 高 的 内 艇 样式 方法 ,其 余 3 种 方法 
的 顺序 相同 , 若 同时 出 现 , 浏 览 器 会 遵守 “最 近 优先 原则 ”, 即 选择 与 内 容 最 靠近 的 那个 样式 
表 插 入 方法 。 


6.3.2 CSS 的 媒介 控制 


CSS 有 一 个 特性 是 对 媒介 的 控制 ,可 设置 不 同 的 媒介 表现 方式 ,媒介 有 显示 屏幕 、 纸 
面 、 言 文 设备 .语音 合成 器 等 ,虽然 作为 计算 机 上 浏览 的 网 页 而 言 ,使 用 最 多 的 是 显示 屏幕 媒 
介 ,但 为 其 他 媒介 设置 特定 的 CSS 有 时 是 很 有 用 的 ,如 公司 要 打印 多 份 网 页 的 内 容 、 网 页 上 





某 些 部 分 不 需要 (如 广告 元 素 等 ) ,字体 尺寸 需要 更 大 、 排 版 也 需要 紧凑 ,这 时 就 需要 设置 一 
个 纸 面 媒介 的 CSS, 例 如 ,下 面 的 一 行 代码 : 


< link href = "mystyle. css" rel = "stylesheet" type = "text/css" media = "print"> 
上 述 代码 说 明 mystyle. css 文档 只 有 在 网 页 打印 到 纸张 时 才 会 生效 ,而 默认 情况 下 使 
用 显示 屏幕 媒介 的 CSS 样式 。 


CSS 支持 的 设备 非常 多 ,只 需 修改 < link > 标记 的 media 属性 值 即 可 ,media 属性 对 应 媒 
介 值 如 表 6-1 所 示 。 


表 6-1 CSS 支持 媒介 值 





media 属性 值 说 明 
all 应 用 于 所 有 的 设备 
Screen 应 用 于 计算 机 屏幕 
print 应 用 于 页 面 的 打印 及 打印 预览 的 状态 
handheld 应 用 于 手持 设备 (小 屏幕 . 单 色 及 带宽 有 限制 的 设备 ) 
projection 应 用 于 投影 演示 
braille 应 用 于 盲文 触摸 式 的 反馈 设备 
aural 应 用 于 语音 合成 设备 


6.4 CSS 的 基本 语法 


CSS 是 用 来 进行 网 页 风格 设计 的 , 它 简 化 并 扩展 了 HTML 中 的 各 种 标记 ,大 大 提高 了 
HTML 开发 的 效率 。 在 制作 网 页 时 采用 CSS 技术 ,可 以 有 效 地 对 页 面 的 布局 .字体 、 颜 色 、 
背景 和 其 他 效果 实现 更 加 精确 的 控制 ,只 要 对 相应 的 代码 做 一 些 简 单 的 修改 ,就 可 改变 同一 
页 面 的 不 同 部 分 ,或 页 数 不 同 的 网 页 的 外 观 和 格式 ,本 节 主 要 介绍 CSS 的 基本 语法 。 


6.4.1 CSS 的 基本 格式 


CSS 语法 的 核心 包括 3 个 部 分 , 即 选择 符 ,样式 属性 及 属性 值 。 其 基本 语法 如 下 : 


选择 符 { 
属性 1: 属性 值 1; 
属性 2: 属性 值 2; 


属性 n: 属性 值 n; 
] 


选择 符 包括 多 种 形式 .所 有 的 HTML 标记 都 可 以 作为 选择 符 , 如 body、p、table 等 。 但 
在 利用 CSS 的 语法 给 它们 定义 属性 和 值 时 ,其 中 属性 和 值 要 用 冒号 隔 开 ,如 果 要 对 一 个 选 
择 符 指定 多 个 属性 时 ,需要 使 用 分 号 将 所 有 的 属性 和 属性 值 分 开 。 例 如 : 





ha{ 
font— size:15px; 
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上 述 代码 中 , h4 是 选择 符 ,是 需要 CSS 定义 的 元 素 ,font-size: 15px 则 是 属性 及 属 
性 值 。 

有 时 多 个 选择 符 会 设置 相同 的 属性 ,为 了 简化 代码 ,可 以 一 次 性 为 它们 设置 样式 ,只 需 
在 各 选择 符 之 间 加 上 ” ,来 分 隔 即 可 ,其 格式 为 : 





例如 : 





上 述 代码 说 明 段 落 和 表格 中 的 文字 属性 相同 。 
另外 还 有 一 种 特殊 格式 : 





这 种 格式 和 上 面 的 格式 很 相似 ,只 是 在 “选择 符 1” 和 “选择 符 2" 之 间 缺 少 了 逗号 ,这 种 
格式 表示 如 果 选 择 符 2 包含 的 内 容 同 时 也 包含 在 选择 符 1 中 时 ,所 设置 的 样式 规则 才 起 


例如 : 





上 述 代 码 说 明 以 上 这 些 属 性 只 对 表格 b 内 的 文字 有 效 ,表格 外 的 文字 无 影响 。 
6.4.2 CSS 的 注释 语句 


开发 人 员 可 以 在 CSS 中 插入 注释 来 说 明代 码 的 含义 ,注释 有 利于 自己 或 他 人 以 后 编辑 
和 更 改 代码 时 理解 代码 的 含义 。 在 浏览 器 中 ,注释 是 不 显示 的 。CSS 注释 以 “/* ”开头 ,以 
“x* /” 结 尾 。 

例如 : 


/* 定义 段落 样式 表 */ 
pt{ 
text ~ align: center; /* 文本 居中 排列 * / 
color: black; /* 文字 为 黑色 */ 
font ~ family: arial /x* 字体 为 arial */ 


6.4.3 CSS 的 选择 符 


CSS 中 的 选择 符 可 以 分 为 5 种 : 标签 选择 符 、 类 选择 符 、id 选择 符 、 伪 类 及 伪 元 素 选 
择 符 。 

1. 标签 选 择 符 

标签 选择 符 即 使 用 XHTML 中 已 有 的 标签 作为 选择 符 。 例 如 


<p style = "color:red"> 


其 中 ,p 是 HTML 标签 选择 符 。 

2. 类 选择 符 

一 个 选择 符 能 有 不 同 的 类 ,因而 允许 同一 元 素 有 不 同样 式 ,用 类 选择 符 可 以 把 相同 的 元 
素 分 类 定义 成 不 同 的 样式 。 在 定义 类 选择 符 时 ,在 自 定 义 类 名 称 的 前 面 加 一 个 句点 标记 
(. ) ,其 格式 为 : 


选择 符 .类 别名 { 
属性 : 值 
上 


如 果 要 让 两 个 不 同文 字 颜 色 的 段落 ,一 个 为 红色 ,一 个 为 蓝 色 ,可 以 先 定义 两 个 类 ， 


p. red{color: red} 
p.blue {color: blue} 


以 上 的 代码 中 定义 了 段落 选择 符 p 的 red 和 blue 两 个 类 , 即 red 和 blue 称 为 类 选择 
符 ,其 中 类 的 名 称 可 以 是 任意 的 英文 字母 或 字母 开头 的 数字 组 合 。 这 里 的 p 是 可 以 省 略 的 ， 
在 实际 应 用 中 ,这 种 省 略 HTML 标记 的 类 选择 符 是 最 常用 的 CSS 方法 ,因为 使 用 这 种 方法 
定义 的 类 选择 符 没 有 适用 范围 的 限制 ,而 不 省 略 HTML 标记 的 类 选择 符 , 其 适用 范围 仅 限 
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于 该 标记 所 包含 的 内 容 。 
省 略 了 HTML 标记 的 类 选择 符 格式 如 下 : 


. red{color: red} 
.blue {color: blue} 


要 在 不 同 的 段落 中 应 用 这 些 样式 ,只 需 在 HTML 标记 中 加 入 已 经 定义 的 class 参数 即 
可 。 例 如: 


<pclass=red> 
<pclass=blue> 


3. id 选择 符 

在 HTML 文档 中 ,需要 唯一 标识 一 个 元 素 时 ,就 会 赋予 它 一 个 id 标识 ,以 便 在 对 整个 
文档 进行 处 理 时 能 够 很 快 地 找到 这 个 元 素 。id 选择 符 就 是 用 来 对 这 个 单一 元 素 定义 单独 
的 样式 , 它 可 以 个 别 地 定义 每 个 元 素 的 成 分 ,但 这 种 选择 符 应 该 尽量 少 用 ,因为 它 具 有 一 定 
的 局 限 性 。 

id 选择 符 的 定义 方法 与 类 选择 符 大 同 小 异 ,一 个 id 选择 符 以 “# "开头 ,只 需要 把 句点 
改 为 井 号 (# ) 即 可 ,其 语法 格式 如 下 : 


#idstyle { 
font ~ family: Arial, Helvetica, sans— serif; 
color: blue; 


} 


调用 时 需要 把 class 改 为 id, 可 以 按照 如 下 方式 应 用 于 HTML 标记 中 。 
<p id = "idstyle"> 文 本 缩 进 3em</p> 


专家 点 拨 : id 选择 符 和 类 选择 符 没 有 本 质 的 区 别 , 很 多 时 候 可 以 混用 (XHTML 不 允 
许 , 但 也 不 会 报错 ) 。 符 合 Web 标准 的 页 面 必 须 结构 良好 ,有 语义 ,有 可 读 性 ,所 以 为 了 良好 
的 代码 编写 习惯 ,建议 读者 严格 区 分 。 同 样 的 id 名 称 在 页 面 中 只 使 用 一 次 ,可 用 于 页 面 的 
布局 等 应 用 ,同样 的 类 名 称 可 在 页 面 中 多 次 使 用 ,作用 于 多 个 对 象 ,以 达到 统一 样式 设置 的 
目的 ,可 用 于 文本 颜色 等 应 用 。 

4. 伪 类 及 伪 元 素 选 择 符 

伪 类 及 伪 元 素 选择 符 是 一 组 CSS 预定 义 好 的 类 和 对 象 ,不 需要 进行 id 和 class 属性 的 
声明 ,能 自动 地 被 支持 CSS 的 浏览 器 所 识别 。 

1) 伪 类 

伪 类 的 基本 格式 为 : 





选择 符 : 伪 类 { 属性 : 值 } 


伪 类 可 以 区 别 不 同 种 类 的 元 素 ,CSS 预定 义 的 伪 类 如 表 6-2 所 示 。 


表 6-2 CSS 预定 义 的 伪 类 





伪 类 用 法 

:link 超级 链接 未 被 访问 时 

:hover 对 象 (一 般 为 超级 链接 ) 在 鼠标 滑 过 时 

:active 对 象 (一 般 为 超级 链接 ) 被 用 户 单 击 时 (注意 鼠标 按 下 未 释放 ) 
:visited 超级 链接 被 访问 后 

:focus 对 象 成 为 输入 焦点 时 

:first-child 对 象 的 第 一 个 子 对 象 

:first 页 面 的 第 一 页 


如 果 要 使 当前 或 可 激活 链接 以 不 同 颜色 .更 大 的 字体 显示 ,然后 当 网 页 的 已 访问 链接 被 
再 次 选中 时 ,又 以 不 同 颜色 .更 小 字体 显示 ,这 个 样式 表 的 示例 如 下 : 
a:link { color: red } 


a:active { color: blue; font — size: 125% } 
a:visited { color: green; font— size: 85% } 


在 实际 的 应 用 中 ,使 用 最 多 的 是 超级 链接 的 4 种 状态 , 即 :link、:hover、:active 和 :visited。 
2) 伪 元 素 
伪 元 素 是 指 元 素 的 一 部 分 ,如 段落 的 第 一 个 字母 。 
伪 元 素 的 基本 格式 为 : 
选择 符 .类 : 伪 元 素 { 属性 : 值 } 
CSS 中 预定 义 的 伪 元 素 如 表 6-3 所 示 。 
表 6-3 CSS 中 预定 义 的 伪 元 素 


伪 元 素 用 法 

:after 设置 某 个 对 象 之 后 的 内 容 
:first-letter 对 象 内 容 的 第 一 个 字符 
:first-line 对 象 内 第 一 行 

:before 设置 某 一 个 对 象 之 前 的 内 容 


如 果 要 使 文章 的 文本 首 行 以 粗 体 且 全 部 大 写 展 示 , 就 可 将 其 作为 一 个 伪 元 素 处 理 , 即 首 
行 伪 元 素 , 它 可 以 用 于 任何 块 级 元 素 ,这 样 的 首 行 伪 元 素 代 码 如 下 : 


p:first ~ line{ 
font ~ variant: small - caps; 
font ~— weight: bold 

， 


另外 ,CSS 还 有 一 个 经 常用 到 的 伪 元 素 就 是 首 个 字母 伪 元 素 。 它 用 于 首 个 字母 的 加 大 
(drop caps) 或 其 他 效果 ,含有 已 指定 值 选择 符 的 文本 的 首 个 字母 会 按照 指定 的 值 展示 。 一 个 首 
个 字母 伪 元 素 可 以 用 于 任何 块 级 元 素 。 例 如 ,使 文本 的 首 字母 比 普 通 字体 加 大 三 倍 ,可 写 为 : 
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p:first— letter { 
font— size: 300%; 
float: left; 

' 


专家 点 拨 : 严格 意义 上 说 , 伪 类 和 伪 元 素 不 属于 选择 符 , 只 是 让 页 面 呈现 丰富 表现 力 的 
特殊 属性 ,之 所 以 称 为 * 伪 ”, 是 因为 它 指定 的 对 象 在 文档 中 并 不 存在 ,它们 指定 的 是 对 象 的 
某 种 状态 。 


6.5 上 机 练习 与 指导 


6.5.1 编写 头 部 CSS 


根据 在 HTML 文件 中 定义 CSS 样式 表 的 位 置 特征 ,可 将 CSS 文件 分 为 头 部 CSS 主体 
CSS 和 外 部 CSS。 本 节 练 习 如 何 应 用 内 部 样式 表 方 法 在 HTML 文件 的 头 部 编写 CSS。 

(1) 打开 记事 本 ,在 记事 本 中 输入 如 下 一 段 普通 的 HTML 代码 ,然后 将 代码 以 . html 
的 扩展 名 保存 。 代 码 如 下 : 


<! 一 上 机 练习 6-1.html -一 > 
<html> 
<head> 
<title> CSS 头 部 文件 </title> 
</head > 
< body> 
<h3 align = "center"> CSS 头 部 文件 </h3 > 
<hr> 
<p> 在 HTML 文件 的 头 部 应 用 内 部 样式 表 方法 添加 CSS.</p> 
</body> 
</html > 


(2) 在 上 面 代码 中 的 < head > 与 </head > 之 间 插 入 如 下 代码 。 


<style type = "text/css"> 
El 
h3 {color: red; font - size:30px;font - family: 华 文 隶 书 } 
p{color: blue;font - family: 楷 体 } 
--> 
</style> 


(3) 保存 后 在 浏览 器 中 打开 文件 ,网 页 效果 如 图 6-4 所 示 。 
6.5.2 编写 主体 CSS 


将 CSS 文件 定义 在 HTML 文件 主体 的 方法 为 嵌入 样式 表 方 法 ,在 记事 本 中 输入 如 下 
代码 ,保存 为 . html 格式 。 





CSS 头 部 文件 - Windows Internet Ex... [|| 区 | 


文件 到 ) 编辑 于 ) 查看 如 收 诚 夹 以) 工具 上) 帮助 如 








GO | 关上 机 千 Fe-!1 htnl 国 [tx CEE 
[li 








C55 买 部 文件 





在 HTML 文 件 的 头 部 应 用 内 部 样式 表 方法 添加 CSS。 


和 > 





6-4 头 部 CSS 文件 浏览 效果 


<! 一 上 机 练习 6-2.html --> 
<html> 
<head> 
<title> 编 写 主体 CSS 文件 </title> 
</head > 
<body> 


<center > 
<hl style= "color:green;font — size:45px;font - family: 黑 体 "> 


编写 主体 CSS 文件 
</hl > 
</center> 


<hr> 
<p style = "font - size:35;font- family: 隶 书 "> 


在 HTML 文件 的 主体 应 用 嵌入 样式 表 方法 添加 CSS. 
</p> 
</body> 
</html > 


保存 后 在 浏览 器 中 打开 的 网 页 效果 如 图 6-5 所 示 。 
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6.5.3 编写 外 部 CSS 


1. 使 用 链 人 外 部 样式 表 方 法 在 HTML 文件 中 调用 外 部 定义 的 CSS 文件 
(1) 打开 记事 本 ,输入 如 下 一 段 代码 ,并 以 扩展 名 为 . css 的 格式 保存 。 


< 一 上 机 练习 6-3-1.css --> 
<style type = "text/css"> 
A EF 
h3 {color: black;font - size:40px; font - family: 黑 体 } 
p{background: orange; color: blue; font - size:25;font- family: 隶 书 } 
Ft 
</style> 


(2) 再 次 打开 一 个 新 的 记事 本 文件 ,输入 如 下 HTML 代码 ,保存 为 . html 格式 的 文件 ， 
并 将 其 连接 到 上 面 定义 的 CSS 文件 中 。 





<! 一 上 机 练习 6-3-1.html --> 
<html> 
<head> 
<title> 外 部 CSS 文件 </title> 
<1link rel = stylesheet type= "text/css" href ="6-3-1.css"> 
</head> 
<body> 
<h3 align = "center"> 外 部 CSS 文件 </h3 > 
<hr> 
<p> 在 HTML 文件 应 用 链 入 外 部 样式 表 方 法 调用 外 部 CSS.</p> 
</body> 
</html > 


(3) 在 浏览 器 中 打开 HTML 文件 ,网 页 的 显示 效果 如 图 6-6 所 示 。 
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2. 使 用 导 和 人 外 部 样式 表 方 法 在 HTML 文件 中 调用 外 部 定义 的 CSS 文件 
(1) 建立 HTML 文件 ,代码 如 下 : 





<! 一 上 机 练习 6-3-2.html --> 
<html> 
<head> 
<title> 外 部 CSS 文件 </title> 
<style style= "text/css"> 
@import url(6- 3-2.css ); 
</style> 
</head> 
<body> 
<hl align= "center"> 外 部 CSS 文件 </hl > 
<hr> 
<p> 在 HTML 文件 中 应 用 导入 外 部 样式 表 方法 调用 外 部 CSS.</p> 
</body> 
</html > 


(2) 再 建立 一 个 单独 的 CSS 文件 ,代码 如 下 : 


<! 一 上 机 练习 6-3-2.css --> 
hl{color:blue;font - size:30px;font - family: 黑 体 } 
p{background:pink;color:black;font - size:20; font - family: 宋 体 } 


(3) 在 浏览 器 中 打开 上 面 建立 的 HTML 文件 ,网 页 的 显示 效果 如 图 6-7 所 示 。 
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在 HTML 文 件 中 应 用 导入 外 部 样式 表 方法 调用 
外 部 CSS。 
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图 6-7 ”使 用 导入 外 部 样式 表 方 法 浏览 效果 


6.6 本 章 习 题 


一 、 选 择 题 
1. CSS 的 全 称 是 ( ) 忆 
A. Cascading Sheet Style B. Cascading System Sheet 章 


CSS 样式 表 基 础 
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C. Cascading Style Sheets D. Cascading Style System 
2. 下 面 不 属于 CSS 插入 形式 的 是 ( 9 

A. 索引 样式 B. 内 部 样式 表 

C. 内 能 样式 表 D. 链接 外 部 样式 表 
3. 使 用 内 嵌 样 式 表 方 法 引用 样式 表 应 使 用 的 引用 标记 是 ( 下 

A. <link > B. < object > C. < style > D. < head > 
4. 链 入 外 部 样式 表 应 使 用 的 标记 是 ( $s 

A. <link> B. <object> C. <style> D. <head> 


5. 不 同 的 选择 符 定义 相同 的 元 素 时 ,优先 级 别 的 关系 是 ( 。 ”)。 
A. 类 选择 符 最 高 ,id 选择 符 其 次 ,HTML 标记 选择 符 最 低 
B. 类 选择 符 最 高 ,HTML 标记 选择 符 其 次 ,id 选择 符 最 低 
C. id 选择 符 最 高 ,HTML 标记 选择 符 其 次 ,类 选择 符 最 低 
D. id 选择 符 最 高 ,类 选择 符 其 次 ,HTML 标记 选择 符 最 低 


二 、 填空 题 

1. CSS 的 英文 全 称 为 

2. CSS 的 注释 语句 标记 为 

3 选择 符 是 一 组 CSS 预定 义 好 的 类 和 对 象 , 不 需要 进行 id 和 class 属性 的 声 
明 , 能 自动 地 被 支持 CSS 的 浏览 器 所 识别 。 

4. XHTML 是 HTML 的 升级 版 ,侧重 点 在 于 对 的 设计 ,其 语法 严谨 ,有 语义 。 

和 是 指 在 HTML 页 面 文件 中 使 用 的 是 外 部 样式 表 。 

6. 在 外 部 样式 表 文 件 中 ,不 能 含有 任何 如 同 _ 或 者 这样 的 HTML 


标记 。 





第 7 章 CSS 布局 


通过 第 6 章 的 学 习 , 读 者 已 经 了 解 了 CSS 强大 的 表现 控制 功能 ,特别 是 在 布局 方面 有 
很 大 的 优势 ,相对 于 代码 条 理 混乱 、 样 式 杂 熔 在 结构 中 的 表格 布局 ,CSS 带 来 了 全 新 的 布局 
方法 ,让 网 页 设计 更 轻松 、 更 自由 。 

本 章 主 要 内 容 如 下 。 

。 了解 DIV 的 概念 。 

。 人 掌握 DIV 的 布局 。 

。 CSS 盒 模型 。 

"CSS 元 素 的 定位 。 








7.1 DIV 十 CSS 的 定义 


DIV 十 CSS 是 网 站 标准 (或 称 *Web 标准 ”) 中 常用 术语 之 一 ,DIV 十 CSS 是 一 种 网 页 的 
布局 方法 ,这 一 种 网 页 布局 方法 有 别 于 传统 的 HTML 网 页 设计 语言 中 的 表格 定位 方式 , 真 
正 地 达到 了 内 容 与 表现 相 分 离 ,使 HTML 语言 变 得 越 来 越 复杂 化 、 专 用 化 。XHTML 语言 
可 以 将 HTML 语言 标准 化 ,用 XHTML 语言 重 写 后 的 HTML 页 面 可 以 应 用 许多 XML 应 
用 技术 。 使 网 页 更 加 容易 扩展 ,适合 自动 数据 交换 ,并 且 更 加 规整 。 在 XHTML 网 站 设计 
标准 中 ,不 再 使 用 表格 定位 技术 ,而 是 采用 DIV 十 CSS 的 方式 实现 各 种 定位 。 


7.1.1 和 初 识 DIV 


div 标签 在 Web 标准 的 网 页 中 使 用 非常 频繁 ,其 原因 并 不 是 div 有 什么 特别 之 处 ,div 
标签 只 是 一 种 块 状元 素 , 但 因为 div 没有 任何 特性 ,所 以 更 容易 被 CSS 代码 控制 样式 。 

div 标签 是 双 标签 , 即 以 < div></div > 的 形式 存在 ,中 间 可 以 放置 任何 内 容 , 包 括 其 他 
的 div 标签 。 也 就 是 说 ,div 标签 是 一 个 没有 任何 特性 的 容器 。 先 来 看 如 下 一 个 实例 。 

【 例 7-1】 初 识 div 标签 。 


== 程序 了 = 二 下 届 ==> 

<html> 

<head> 
<meta http— equiv = "Content — Type" content = "text/html; charset = gb2312" /> 
<title> 无 标题 文档 </title> 

</head> 

<body> 
<div> 我 是 第 1 个 div 标签 中 的 内 容 </div> 
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<div> 我 是 第 2 个 div 标签 中 的 内 容 </div> 
<div> 我 是 第 3 个 div 标签 中 的 内 容 </div> 
</body> 
</html > 








该 代码 的 浏览 效果 如 图 7-1 所 示 , 可 以 看 出 ,在 没有 CSS 的 帮助 下 ,div 标签 没有 任何 
特别 之 处 ,无 论 如 何 调整 浏览 器 窗口 ,每 个 div 标签 只 占据 一 行 , 即 默认 情况 下 ,一行 只 能 容 
纳 一 个 div 标签 。 
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图 7-1 默认 的 div 标签 


为 了 再 次 证 明 一 行 只 能 容纳 一 个 div 标签 ,这 里 对 div 通过 id 选择 符 加 入 CSS 代码 ,使 
div 拥有 背景 色 及 宽度 ,修改 后 的 代码 如 下 。 
【 例 7-2〗 加 入 了 CSS 的 div 标签 。 


<! -- 程序 7-2.html --> 
<html> 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 初 识 div 标签 </title> 
< style type = "text/css"> 
井 top, 提 bt{background - color: ##eee;} 
井 mid{fbackground - color: 井 999; 
width:250px; 
|: 
##bt{width:120px;} 
</style> 
</head> 
<body> 
<div id= "top"> 第 1 个 div 标 签 中 的 内 容 </div> 
<div id= "mid"> 第 2 个 div 标签 中 的 内 容 </div> 
<div id= "bt"> 第 3 个 div 标签 中 的 内 容 </div> 
</body> 
</html > 








该 代码 的 浏览 效果 如 图 7-2 所 示 , 可 以 看 出 ,通过 背景 色 的 设置 , div 标签 默认 占据 一 
行 ,宽度 也 为 一 行 的 宽度 。 通 过 宽度 的 设置 可 以 发 现 ,并 不 是 因为 div 的 宽度 为 一 行 导致 无 











法 容纳 后 面 的 div 标签 ,而 是 无 论 宽度 为 多 少 , 一 行 始终 都 只 有 一 个 div 标签 。 
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7-2 加 入 CSS 的 div 标签 


div 标签 作为 网 页 CSS 布局 的 主力 元 素 , 其 优势 已 经 非常 明显 。 相 对 于 表格 布局 ,div 
更 加 灵活 ,因为 div 只 是 一 个 没有 任何 特性 的 容器 ,CSS 可 以 非常 灵活 地 对 其 进行 控制 ,组 
成 网 页 的 每 一 块 区 域 。 在 大 多 数 情况 下 ,仅仅 通过 div 标签 和 CSS 的 配合 即 可 完成 页 面 的 
布局 , 故 很 多 人 称 Web 标准 页 为 DIV 十 CSS 网 页 。 


7.1.2 DIV 元 素 的 样式 设置 


上 一 节 提 到 了 XHTML 的 布局 核心 标签 是 div ,并 且 div 属于 XHTML 中 的 块 级 元 素 ， 
XHTML 的 标签 默认 为 两 种 元 素 , 即 块 状元 素 (Block Element) 和 内 联 元 素 (Inline 
Element) ,这 两 种 元 素 都 是 HTML 规范 中 的 概念 。 

1. 块 状元 素 

块 状元 素 是 其 他 元 素 的 容器 ,一 般 是 矩形 的 ,可 容纳 内 联 元 素 和 其 他 块 状元 素 , 它 有 自 
己 的 高 度 和 宽度 。 默 认 情 况 下 ,在 父 容器 中 占据 一 行 ,同一 行 无 法 容纳 其 他 元 素 及 文本 。 其 
他 的 元 素 将 显示 在 其 下 一 行 , 这 可 以 看 作 是 被 块 级 元 素 " 挤 "下 去 的 。 块 状元 素 就 是 一 个 矩 
形容 器 ,在 CSS 设置 了 高 度 和 宽度 后 ,形状 将 无 法 被 改变 。 

2. 内 联 元 素 

与 块 级 元 素 相反 ,内 联 元 素 没有 固定 形状 ,也 无 法 设置 宽度 和 高 度 。 内 联 元 素 的 形状 由 
其 内 含 的 内 容 决 定 , 所 以 在 宽度 足够 的 情况 下 ,一 行 能 容纳 多 个 内 联 元 素 。 如 果 说 块 状元 素 
是 一 个 硬 盒 子 ,那么 内 联 元 素 就 是 一 个 软 软 的 布袋 子 (形状 由 内 容 决定 )。 

块 状 元 素 和 内 联 元 素 的 基本 差异 是 块 状元 素 一 般 都 从 新 行 开始 ,而 当 加 入 了 CSS 控制 
以 后 , 块 状元 素 和 内 联 元 素 的 这 种 属性 差异 就 不 成 为 差异 了 ,完全 可 以 把 内 联 元 素 加 上 
display:block 这 样 的 属性 ,让 它 也 有 每 次 都 从 新 行 开 始 的 属性 。 相 对 来 说 , 块 状元 素 适合 
于 大 块 的 区 域 排版 ,所 以 常用 来 布局 页 面 ; 而 内 联 元 素 适 合 于 局 部 元 素 的 样式 设置 ,所 以 常 
用 于 局 部 的 文字 样式 设置 。 

要 使 用 div 元 素 进行 网 页 布局 ,首先 要 学 会 使 用 CSS 灵活 地 设置 div 元 素 的 样式 。 作 
为 单个 div 元 素 .width 属性 用 于 设置 其 宽度 .height 属性 用 于 设置 其 高 度 。 由 于 网 页 大 多 
数 用 计算 机 显示 屏幕 作 媒介 ,因此 常用 像素 (px) 作 为 固定 尺寸 的 单位 。 当 单位 为 百分比 
时 ,div 元 素 的 宽度 和 高 度 为 自 适应 状态 , 即 宽度 和 高 度 适应 浏览 器 窗口 尺寸 而 变化 。 

为 了 更 方便 地 看 到 div 的 表现 ,在 例 7-3 中 给 两 个 div 都 设置 了 浅 灰 色 背 景色 和 黑色 边 
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框 ,代码 如 下 。 
【 例 7-3】 设置 DIV 样式 。 


< == 程序 7=3.htal ==> 
<html> 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 设 置 div 样式 </title> 
<style type = "text/css"> 
提 fst { 
background - color: #eee; 
border:1px solid #000; 
width:300px; 
height :200px; 
! 
#sec { 
background - color: #eee; 
border:1px solid 井 000; 
width:50 % ; 
height:25%; 
) 
</style> 
</head> 
<body> 
<div id= "fst"> 固 定 尺寸 的 宽度 和 高 度 </div> 
<hr /> 
<div id= "sec"> 自 适应 尺寸 的 宽度 和 高 度 </div> 
</body> 
</html > 





该 代码 的 浏览 效果 如 图 7-3 所 示 。 
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7-3 设置 div 标签 高 度 自 适 应 


很 明显 ,第 1 个 div 宽度 和 高 度 固定 ,形成 了 一 个 "坚硬 ”的 盒子 。 而 第 2 个 div 由 于 设 
置 宽度 为 50%% ,因此 该 div 的 宽度 会 随 着 浏览 器 宽度 的 变化 而 变化 。 第 2 个 div 的 高 度 设 
置 为 25% ,按理 说 其 高 度 也 应 该 随 着 浏览 器 高 度 的 变化 而 变化 .可 在 本 例 中 div 高 度 仅 和 文 
本 高 度 相当 ,好 像 高 度 设置 没有 起 作用 。 

设置 div 的 高 度 自 适应 问题 有 一 个 前 提 , 即 div 的 高 度 自 适应 是 相对 于 父 容器 的 高 度 ， 
本 例 中 div 父 容器 为 body 或 html( 不 同 浏览 器 解析 方式 不 同 ) 。body 或 html 在 本 例 中 没 
有 设置 高 度 ,div 的 高 度 自 适应 没有 参照 物 ,也 就 无 法 生效 。 要 解决 这 个 问题 需 在 CSS 中 设 
置 body 和 html 的 高 度 ,即将 body 和 html 的 高 度 直接 设置 为 100%% ,为 了 考虑 多 种 浏览 器 
的 兼容 性 ,html 和 body 的 宽度 同时 设置 为 100%。 在 上 例 代码 的 CSS 部 分 添加 如 下 代码 
即 可 , 且 不 会 对 页 面 有 任何 影响 。 














html, body 
width:100%; 
height:100%; 
} 


更 改 后 的 浏览 效果 如 图 7-4 所 示 。 
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7-4 设置 div 标签 高 度 自 适应 


调整 浏览 器 高 度 后 ,第 2 个 div 的 高 度 随 之 变化 。 
专家 点 拨 : 各 种 浏览 器 对 XHTML 和 CSS 的 解析 方式 有 差异 ,在 后 面 将 详细 讨论 解决 

办 法 ,以 解决 浏览 器 的 兼容 性 问题 。 

7.1.3 DIV 的 页 面 布 局 


由 于 用 户 的 计算 机 显示 屏 分 辩 率 不 同 ,因此 在 布局 页 面 时 ,要 充分 考虑 页 面 内 容 的 布局 | 7 
宽度 ,并 保证 页 面 整 体内 容 在 页 面 居中 。 一 旦 内 容 宽 度 超过 显示 宽度 ,页 面 将 出 现 水 平 深 | 章 
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动 条 。 

1. 布局 页 面 的 宽度 

在 布局 页 面 宽 度 时 一 般 要 考虑 最 小 显示 分 辩 率 的 用 户 , 过 去 用 户 的 显示 分 辩 率 最 小 为 
800 像素 X600 像素 (15 寸 CRT 显示 器 ) ,其 最 小 宽度 为 800 像素 。 浏 览 器 的 边框 及 滚动 条 
部 分 约 占 24 像素 , 故 布局 宽度 应 为 分 辩 率 的 水 平 像素 减 去 24 像素 , 即 过 去 网 页 布局 宽度 一 
般 为 778 像素 ,再 宽 就 会 使 页 面 产 生 水 平 滚动 条 。 

由 于 计算 机 设备 的 飞速 发 展 , 现 在 使 用 800 像素 X600 像素 显示 分 辩 率 的 用 户 很 少 了 ， 
现在 页 面 布局 宽度 最 大 不 超过 1003 像素 (考虑 到 最 小 宽度 1024 像素 , 即 1024 像素 X768 
像素 显示 分 辩 率 ) 。 

专家 点 拨 : 应 尽量 保证 网 页 只 有 垂直 滚动 条 , 才 符 合用 户 的 习惯 ,所 以 高 度 不 需要 考 
虑 ,由 页 面 内 容 决定 网 页 高 度 。 

2. 布局 页 面 水 平 居中 

为 了 适应 不 同 用 户 的 分 辩 率 ,网 页 设计 师 要 始终 保证 页 面 整 体内 容 在 页 面 居中 。 在 使 
用 HTML 表格 布局 页 面 时 ,只 需要 设置 布局 表格 的 align 属性 为 center 即 可 ,而 DIV 居中 
没有 属性 可 以 设置 ,只 能 通过 CSS 控制 其 位 置 。 

在 布局 页 面前 ,网 页 制作 者 一 定 要 把 页 面 的 默认 边 距 清除 。 为 了 方便 操作 ,常用 的 方法 
是 使 用 通 配 选 择 符 ”* ”将 所 有 对 象 的 边 距 清除 , 即 margin 属性 和 padding 属性 。margin 属 
性 代表 对 象 的 外 边 距 ( 上 、 下 、 左 、 右 ) ,padding 属性 代表 对 象 的 内 边 距 ,也 称 填充 (上 、 下 、 
左 、 右 )。 

专家 点 拨 : margin 属性 和 padding 属性 类 似 于 表格 单元 格 的 cellspacing 属性 和 
cellpadding 属性 ,不 过 margin 属性 和 padding 属性 作用 于 所 有 块 状元 素 。 

使 div 元 素 水 平 居中 的 方法 有 多 种 ,常用 的 方法 是 用 CSS 设置 div 的 左右 边 距 , 即 
margin-left 属性 和 margin-right 属性 。 当 设置 div 左 外 边 距 和 右 外 边 距 的 值 为 auto, 即 自 
动 时 , 左 外 边 距 和 右 外 边 距 将 相等 , 即 达 到 了 div 水 平 居 中 的 效果 。 下 面 为 设置 div 水 平 居 
中 的 代码 。 

【 例 7-4】 设置 div 水 平 居中 。 











<! -- 程序 7- 4.html --> 
< htm1l > 
<head> 
<meta http— equiv = "Content - TYpe"” content = "text/html; charset = gb2312" /> 
<title> 设 置 div 水 平 居中 </title> 
< style type = "text/css"> 
x* {margin:Opx; 
Padding: Opx; 
} 
#all{width:75 % ; 
height :200px; 
background — color: # eee; 
border:1px solid 提 000; 
margin— left:auto; 





margin — right:auto; 


| 


</style> 
</head> 
<body> 
<div id= "all"> 布 局 页 面 内 容 </div> 
</body> 
</html> 


为 了 更 方便 看 到 div 的 表现 ,上 例 给 div 设置 了 浅 灰 色 背 景色 和 黑色 边框 ,浏览 效果 如 
图 7-5 所 示 。 














设置 div 水 平 居中 - Windows Internet Explorer 
文件 中” 编辑) 查看 WW) 收 庆 天 ) 工具 D) 于 助 0 
ea = 
SO mms x Yr. s+ 
宣 收 京 天 。 | 戎 设 村 4v 水 平 居中 [| 全 











抽 局 页 面 内 容 








图 7-5 设置 div 水 平 居 中 
另外 ,CSS 代码 中 设置 外 边 距 的 margin 属性 还 可 以 进一步 简化 ,其 编写 方法 为 ， 


margin:0px auto; 





margin 属性 值 前 面 的 0 代表 上 边 距 和 下 边 距 为 0 像素 ,auto 代表 左边 距 和 右边 距 为 
auto, 即 自动 设置 。 注 意 0px 和 auto 之 间 使 用 空格 符号 分 隔 , 而 不 是 逗号 。 还 有 一 种 方法 
是 使 用 html 或 body 的 text-align 属性 ,设置 其 值 为 center, 即 所 有 对 象 将 居中 。 这 样 将 导 
致 页 面 文本 居中 ,所 以 不 作 推 荐 ,其 编写 方法 为 : 


html, body{ text — align: center;} 


7.1.4 DIV 元 素 的 布局 技巧 


很 多 网 站 在 如 何 推广 的 文章 中 称 ,搜索 引擎 一 般 不 抓 取 3 层 以 上 的 表格 嵌 套 ,这 一 点 一 
直 没 有 得 到 搜索 引擎 官方 的 证 实 。 但 根据 目前 掌握 的 情况 来 看 , 当 spider 爬行 Table 布局 
的 页 面 , 遇 到 多 层 表格 嵌 套 时 ,会 跳 过 艇 套 的 内 容 或 直接 放弃 整个 页 面 。 

使 用 Table 布局 ,为 了 达到 一 定 的 视觉 效果 ,不 得 不 套用 多 个 表格 。 如 果肉 套 的 表格 中 
是 核心 内 容 ,spider 爬行 时 跳 过 了 这 一 段 没 有 抓 取 到 页 面 的 核心 内 容 , 这 个 页 面 就 成 了 相似 
页 面 。 网 站 中 过 多 的 相似 页 面 会 影响 排名 及 域名 信任 度 。 
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DIV 十 CSS 布局 基本 上 不 会 存在 这 样 的 问题 ,从 技术 角度 来 说 ,XHTML 在 控制 样式 时 
也 不 需要 过 多 的 内 套 。DIV 十 CSS 起 到 的 作用 是 将 设计 部 分 剥离 出 来 放 在 一 个 独立 样式 文 
件 中 ,HTML 文件 中 只 存放 文本 信息 。 

1. DIV 元 素 的 肉 套 

类 似 于 表格 布局 页 面 , 为 了 实现 复杂 的 布局 结构 , div 元 素 也 需要 互相 能 套 。 但 在 布局 
页 面 时 尽量 少 能 套 , 因 为 XHTML 元 素 多 重 说 套 将 影响 浏览 器 对 代码 的 解析 速度 。 

【 例 7-5】 编写 div 符 套 代码 。 








<! -= 程序 7-5.htnl --> 
<html> 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> div 舱 套 </title> 
< style type = "text/css"> 
* {margin:0px7 
padding: Opx; 
由 
井 all{fwidth:400px; 
height:300px'; 
background - color: #600; 
margin:0px auto; 
1 
提 one{width:300px; 
height:120px; 
background - color: # eee; 
border:1px solid #000; 
margjin:0px auto; 
# two{width:300px; 
height :120px; 
background — color: # eee; 
border:1px solid #000; 
margin: Opx auto; 


} 





</style> 
</head> 
<body> 
<div id= "all"> 
<div id= "one"> 顶 部 </div> 
<div id= "two"> 底 部 </div> 
</div> 
</body> 
</html > 


该 例 中 all 为 父 容器 (外 部 div) ,而 one 和 two 这 两 个 div 则 肉 套 在 all 这 个 父 容器 中 ， 
为 了 更 方便 看 到 div 的 表现 ,给 内 部 div 设置 了 浅 灰色 背景 色 和 黑色 边框 ,而 外 部 的 div 为 
深 灰色 背景 。 本 例 综合 了 div 居中 的 知识 ,内 部 的 两 个 div 水 平 居中 在 其 父 容器 中 ,其 浏览 




















效果 如 图 7-6 所 示 。 


div 徽 套 - Windows Internet Ezplorer 
文件 中 妨 辑 邓 ) 查看 收 寮 夹 岂 工具 CD) 帮助 Q) 
站 rtT\EF7-5. hl 图 | 对 ||x] | 贸 we set 

[Ee 加 响 ”页 面 四 - 
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图 7-6 div 振 套 


2. DIV 元 素 的 浮动 

作为 块 状元 素 , 通 过 div 布局 网 页 ,再 用 CSS 设置 其 属性 ,完全 符合 内 容 与 表现 分 离 。 
由 于 一 个 div 标签 只 占据 一 行 ,要 实现 布局 中 并 列 的 两 块 区 域 , 块 状元 素 有 一 个 很 重要 的 
float 属性 ,可 以 使 多 个 块 状元 素 并 列 于 一 行 。 

float 属性 也 称 为 浮动 属性 ,对 前 一 个 div 元 素 设置 浮动 属性 后 , 当 该 div 元 素 留 有 足够 
的 空白 宽度 时 ,后 面 的 div 元 素 将 自动 浮上 来 ,和 前 面 的 div 元 素 并 列 于 一 行 。 

float 属性 的 值 有 left、right、none 和 inherit。 很 多 对 象 都 有 inherit 属性 ,这 是 继承 属 
性 ,代表 继承 父 容器 的 属性 。 当 float 属性 值 为 none 时 , 块 状元 素 不 会 浮动 ,这 也 是 块 状元 
素 的 默认 值 ; 当 float 属性 值 为 left 时 , 块 状元 素 将 向 左 浮动 ; 当 float 属性 值 为 right 时 , 块 
状元 素 将 向 右 浮动 。 

专家 点 拨 : 使 两 个 div 并 列 于 一 行 的 前 提 是 这 一 行 有 足够 的 宽度 。 

【 例 7-6】 设置 div 浮动 。 

















<! -- 程序 7- 6.html --> 
<html> 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 设 置 div 浮动 </title> 
<style type = "text/css"> 
* {margin:Opx; 
Padding: 0px; 
} 
划 one{width:125px; 
height:120px; 
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background - color: # eee; 
border:1px solid #000; 
float: left; 
} 
# two{width:200px; 
height:120px; 
background - color: # eee; 
border:1px solid #000; 
} 
</style> 
</head> 
<body> 
<div id= "one"> 第 1 个 div</div> 
<div id= "two"> 第 2 个 div</div> 
</body> 
</html > 





本 例 给 div 设置 了 浅 灰 色 背 景色 和 黑色 边框 ,浏览 效果 如 图 7-7 所 示 。 


/ 设置 div 浮 动 - Windows Internet Explorer 
文件 中 ”编辑 E) 查看 (0) 
EE DY 








加 1 个 div 聊 2 个 div 








图 7-7 设置 div 向 左 浮动 


例 7-6 只 设置 了 第 1 个 div 元 素 向 左 浮动 ,第 2 个 div 元 素 “ 流 ”上 来 了 ,并 紧 挨 着 第 1 
个 div 元 素 。 若 要 设置 第 2 个 div 向 右 浮动 ,可 将 CSS 元 素 中 的 two 做 如 下 修改 : 


# two{width:200px; 
height :120px; 
background - color:# eee; 
border:1px solid 井 000; 
float: right; 
| 


更 改 后 的 浏览 效果 如 图 7-8 所 示 。 
修改 后 的 第 2 个 div 紧 挨 着 其 父 容器 (浏览 器 ) 的 右边 框 ,当然 ,这 两 个 div 元 素 也 可 以 
互 换 位 置 ,将 上 面 的 代码 做 如 下 修改 : 


让 设置 iv 浮动 - Windows Internet Ezplorer 此 | 上 癌 | 区 | 

文件 四 “编辑 下 查看 中。 收 豪 天 工具 I) 帮助 四 

SO | 关 -m 和 re-t nh 国 [53 |X| 铅 =ve := 
辕 | 屿 _ 人 Ae 




















图 7-8 div 左 浮动 和 右 浮动 


one{width:125px; 
height:120px; 
background - color: # eee; 
border:1px solid 井 000; 
float:right; 
} 
提 two{width:200px; 
height :120px; 
background - color: # eee; 
border:1px solid #000; 
float: left; 
} 


修改 后 的 浏览 效果 如 图 7-9 所 示 。 


人 设置 div 浮 动 - Windows Internet Explorer 

文件 史 ) 编辑 到 ) 查看 W) 收藏 天 WW) 工具 CI) 帮助 0D) 
GO [| 居中 序 7-6-2. hnl 国 [tr [x| 外 ve seea 
帘 收 藏 天 | 荐 设置 div 汪 动 














图 7-9 交换 div 浮动 方向 





浮动 属性 是 CSS 布局 的 最 佳 利器 ,可 以 通过 不 同 的 浮动 属性 值 灵活 地 定位 div 元 素 ,以 
达到 灵活 布局 网 页 的 目的 。 块 状元 素 (包括 div) 浮 动 的 范围 由 其 被 包含 的 父 容器 所 决定 ,以 
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上 实例 div 元 素 的 父 容器 就 是 body 或 html。 

为 了 更 加 灵活 地 定位 div 元 素 .CSS 提供 了 clear 属性 , 即 “ 清 除 ”。clear 属性 的 值 有 
none,left right 和 both ,默认 值 为 none。 当 多 个 块 状元 素 由 于 第 1 个 设置 浮动 属性 而 并 列 
时 ,如 果 某 个 元 素 不 需要 被 “ 流 ” 上 去 , 即 可 设置 相应 的 clear 属性 。 

【 例 7-7】 div 的 清除 属性 。 








<! -- 程序 7-7.html --> 
< html > 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> div 的 清除 属性 </title> 
<style type = "text/css"> 
* {margin:Opx; 
padding: Opx; 
, 
.all{width:400px; 
height:170px; 
background - color: # CCCCCC; 
margin:0px auto; 
} 
,one .two, 井 three_1l, ##three_2, ##three_3, #three_4{width:120px; 
height :50px; 
background — color: # eee; 
border:1px solid #000; 
} 
.one{float: left;} 
.two{float:right;} 
#three_1l{clear:none;} 
#three 2{clear:both;} 
提 three 3{clear:right;} 
#three 4{clear:left;} 
</style> 
</head> 
<body> 
<divclass="all"> 
<div class = "one"> 第 1 个 div</div> 
<div class = "two"> 第 2 个 div</div> 
<div id= "three_1"> 第 3 个 div(clear:none;)</div> 
</div> 
<div class="all"> 
<div class = "one"> 第 1 个 div</div> 
<div class = "two"> 第 2 个 div</div> 
<div id= "three_2"> 第 3 个 div(clear:both; )</div> 
</div> 
<div class = "all"> 
<div class = "one"> 第 1 个 div</div> 
<div id = "three_3"> 第 2 个 div(clear:right;)</div> 
<div class = "two"> 第 3 个 div</div> 





</div> 
<div class = "all"> 
<div class = "one"> 第 1 个 div</div> 
<div id= "three_4"> 第 2 个 div(clear:left;)</div> 
<div class = "two"> 第 3 个 div</div> 
</div> 
</body> 
</html > 


本 例 的 浏览 效果 如 图 7-10 所 示 。 























| 


了 爷 2 个 div 
(clear:left;) 





7-10 div 清除 属性 


从 图 7-10 中 各 div 的 分 配 效 果 可 以 看 出 : 
(1) 第 1 种 情况 为 默认 情况 , 即 clear 属性 值 为 none, 由 于 前 面 的 div 都 设置 了 浮动 属 
性 (一 个 向 左 浮动 ,一 个 向 右 浮动 ) ,因此 第 3 个 div 元 素 自 动 “ 流 ”上 去 ,处 于 两 个 divy 之 间 的 | 7 
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空白 处 。 


(2) 第 2 种 情况 是 clear 属性 值 为 both, 即 不 管 前 面 的 div 设置 是 向 左 浮动 还 是 向 右 浮 
动 , 此 div 元 素 不 自动 “ 流 "* 上 去 。 其 不 受 浮动 影响 ,保持 在 底部 不 动 。 

(3) 第 3 种 情况 是 clear 属性 值 为 right, 第 2 个 div 两 边 都 有 浮动 的 div, 但 不 允许 向 右 
浮动 的 div 处 于 同一 行 ,所 以 第 3 个 div 元 素 自动 换行 。 

(4) 第 4 种 情况 是 clear 属性 值 为 left, 第 2 个 div 两 边 都 有 浮动 的 div, 但 不 允许 向 右 浮 
动 的 div 处 于 同一 行 , 所 以 第 2 个 div 元 素 自 动 换行 。 

通过 clear 属性 ,div 元 素 的 定位 更 加 方便 自如 ,希望 读者 多 加 练习 。 

为 了 满足 更 多 布局 的 要 求 ,div 的 使 用 还 可 采用 一 些 技巧 。 

3. 右边 div 元 素 宽度 自 适应 

自 适应 宽度 是 指 两 个 并 排 的 div, 其 中 左边 的 div 为 固定 宽度 ,右边 div 则 根据 浏览 器 的 











宽度 自动 调整 ,这 种 用 








法 常用 于 文章 列表 和 文章 内 容 的 页 面 布局 。 


【 例 7-8】 右边 div 元 素 宽 度 自 适应 。 


<! -- 程序 7-8.html --> 


<html> 
<head> 


<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 右 边 div 元 素 宽度 自 适应 </title> 

<style type = "text/css"> 

x {margin:Opx; 


padding: 0px; 


l; 


提 one{width:70%; 
height :200px; 
background - color: # eee; 





border:1px solid #000; 
float: right; 


| 


# two{width:50px; 
height:200px; 
background - color: # eee; 
border:1px solid #000; 
float: right; 


} 
</style> 
</head> 
<body> 


<div id= "one"> 第 1 个 div</div> 
<div id= "two"> 第 2 个 div</div> 


</body> 
</htm]l > 





浏览 效果 如 图 7-11 所 示 。 
本 例 特意 把 两 个 div 设置 为 向 右 浮动 ,第 1 个 div 元 素 为 自 适应 宽度 ,而 第 2 个 div 元 











右边 div 元 素 宽 度 自 适应 - Windows Inte--- [- | 右 | 区 | 
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图 7-11 右边 div 元 素 宽 度 自 适应 


素 为 固定 宽度 。 这 主要 是 为 了 防止 读者 的 一 个 错觉 , 即 前 面 的 div 浮动 后 一 定 在 左边 ,实际 
上 左右 方向 取决 于 div 元 素 浮 动 属 性 的 值 。 





4. div 内 容 居 中 


div 内 容 居 中 即 保持 div 包含 内 容 的 水 平和 垂直 居中 ,这 是 很 多 网 站 需要 用 到 的 。 
【 例 7-9】 div 内 容 居中 。 


<! -- 程序 7-9.html --> 


< html> 
<head> 


<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 


<title> div 内 容 居 中 </title> 
< style type = "text/css"> 
# {margin:0px; padding:0px; } 
body, html { height :100 % ;} 
.center{width:300px; height:250px; 
text ~ align: center; 
line ~ height :250px; 
background - color: # eee; 
border:1px solid #000; 
float: left; 


} 
</style> 
</head> 
<body> 


<div class = "center"> 内 容 在 中 间 </div> 


</body> 
</html> 


本 例 用 了 text-align 


性 , 当 设 置 为 div 的 高 度 时 ,其 所 含 内 容 垂直 居中 。 其 浏览 效果 如 图 7-12 所 示 。 








属性 , 即 所 含 内 容 水 平 居中 ,也 用 了 line-height 属性 ,这 是 行距 属 
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生 v 内 容 居 中 - Windovs Interne... [- | 口 | 区 | 


文件 外 编辑 EE) 查看 WD 收 芯 来 由 ) 工具 CD) 帮 ” 
BO Bar ms |] 让- 
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内 容 在 中 间 








图 7-12 div 内 容 居中 


7.2 CSS 盒 模型 


盒 模型 是 CSS 定位 布局 的 核心 内 容 。 在 7. 1 节 中 读者 学 习 了 布局 网 页 基本 方法 ,利用 
div 元 素 可 完成 页 面 大 部 分 的 布局 工作 。 而 了 解 盒 模型 的 知识 后 ,读者 将 拥有 较 完善 的 布 
局 观 , 基 本 可 做 到 在 代码 编写 前 就 “胸有成竹 ”。 


7.2.1 CSS 盒 模型 的 定义 


XHTML 中 大 部 分 的 元 素 ( 特 别 是 块 状 元 素 ) 都 可 以 看 作 是 一 个 盒子 ,W3C 组 织 建议 把 
所 有 网 页 上 的 对 象 都 放 在 一 个 盒子 (box) 中 ,设计 师 可 以 通过 创建 定义 来 控制 这 个 盒子 的 
属性 ,这些 对 象 包括 段落 列表、 标题 .图 片 及 层 。 如 图 7-13 所 示 , 盒 模型 主要 定义 4 个 区 
域 : 内 容 (Ccontent) 内 边 距 (padding) ,边框 (border) 和 外 边 距 (margin)。 它 们 之 间 相 互 影 
响 , 层 层 骨 套 ,设计 师 在 布局 网 页 和 定位 XHTML 元 素 时 要 充分 考虑 到 这 些 要 素 , 才 可 以 更 
自如 地 摆弄 这 些 盒子 。 而 网 页 元 素 的 定位 实际 上 就 是 这 些 大 大 小 小 的 盒子 在 页 面 中 的 定 
位 ,这 些 盒子 在 页 面 中 是 "浮动 ”的 , 当 某 个 块 状元 素 被 CSS 设置 了 浮动 属性 ,这 个 盒子 就 会 
“ 流 ”" 到 上 一 行 。 所 谓 的 网 页 布局 就 是 关注 这 些 盒子 在 页 面 中 如 何 摆 放 、 如 何 榜 套 的 问题 ,而 
这 么 多 盒子 摆 在 一 起 ,最 需要 关注 的 是 盒子 尺寸 计算 、 是 否 流动 等 要 素 。 











外 边 距 (margin) ! 
| 内 边 距 (padding) | 一 边框 (border) 





内 容 (content) 




















图 7-13 盒 模型 示意 图 


7.2.2 元 素 的 高 度 和 宽度 


下 面 的 例子 中 元 素 的 总 宽度 为 300 像素 。 
【 例 7-10】 元 素 的 高 度 和 宽度 。 





< -=- 程序 7- 10. htnl--> 

<! DOCTYPE htm] > 

<html> 

<head> 

<title> 示 例 (runoob. com)</title> 

<style> 

div { background ~ color: lightgrey; 
width: 300px; 
border: 25px solid green; 
padding: 25px; 
margin: 25px; 

js 

</style> 

</head> 

<body> 

<h2 > 盒 模型 演示 </h2 > 





<p> CSS 盒 模型 本 质 上 是 一 个 盒子 ,封装 周围 的 ErML 元 素 , 它 包 括 边 距 , 边 框 ,填充 和 实际 内 容 。</p> 


<div> 这 里 是 盒子 内 的 实际 内 容 . 有 25px 内 间距 ,25px 外 间距 ,25px 绿色 边框 。</div> 
</body> 
</html > 


本 例 浏览 效果 如 图 7-14 所 示 。 
盒 模 型 演示 








CSS 盒 模型 本 质 上 是 一 个 合子， 封装 周围 的 HTIL 元 素 ， 它 包括 边 距 边框 填充 和 实际 内 容 。 


这 里 是 盒子 内 的 实际 内 容 。 有 25px 内 间 
距 ，25px 外 间距 、25px 绿色 边框 。 























图 7-14 CSS 中 3 个 元 素 的 高 度 和 宽度 


专家 点 拨 : 最 终 元 素 的 总 宽度 计算 公式 为 : 
元 素 的 总 宽度 一 宽度 十 左 填充 十 右 填充 十 左边 杠 
十 右边 框 十 左边 距 十 右边 距 
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元 素 的 总 高 度 一 高 度 十 顶部 填充 十 底部 填充 十 上 边框 
十 下 边框 十 上 边 距 十 下 边 距 








当 指 定 一 个 CSS 元 素 的 宽度 和 高 度 属性 时 ,只 是 设置 内 容 区 域 的 宽度 和 高 
道 ,完全 大 小 的 元 素 ,还 必须 添加 填充 、 边 框 和 边 距 。 
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7.2.3 边 距 控制 


边 距 就 是 用 来 设置 网 页 中 某 个 元 素 的 四 边 和 网 页 中 其 他 元 素 之 间 的 空白 距离 ,在 CSS 
盒 模 型 中 有 外 边 距 (margin) 和 内 边 距 (padding) 之 分 。 

1. 外 边 距 的 控制 

外 边 距 属性 即 CSS 的 margin 属性 ,CSS 中 可 拆 分 为 margin-top( 顶 部 外 边 距 ) 、margin- 
bottom( 底 部 外 边 距 )、margin-left( 左 外 边 距 ) 和 margin-right( 右 外 边 距 ) ,而 margin 则 是 一 
个 复合 的 外 边 距 属 性 ,在 CSS 中 ,外 边 距 属 性 margin 既 可 以 统一 设置 ,也 可 以 上 下 左右 分 
开设 置 , 其 语法 格式 为 : 





margin 一 top: 长 度 | 百 分 比 |auto 
margin 一 bottom: 长 度 | 百分比 |auto 
margin 一 left: 长 度 | 百分比 |auto 
margin 一 right: 长 度 | 百分比 |auto 
margin: 长 度 | 百分比 |auto 


说 明 

(1) 长 度 包 括 长 度 值 和 长 度 单位 ,长 度 单位 可 以 使 用 前 面 多 次 提 到 的 绝对 单位 或 相对 
单位 。 

(2) 百分比 是 相对 于 上 级 元 素 宽度 的 百分比 ,允许 使 用 负数 。 

(3) auto 为 自动 提取 边 距 值 ,为 默认 值 。 

(4) margin 复合 属性 和 可 以 取 1 到 4 个 值 来 同时 设置 边框 周围 的 4 个 边 距 。 

取 一 个 值 : 4 条 边框 均 使 用 这 一 个 值 。 例 如 ,margin: 10px; 表示 所 有 4 个 外 边 距 都 
为 10px。 

取 两 个 值 : 上 下 边框 使 用 第 一 个 值 ,左右 边框 使 用 第 二 个 值 ,两 个 值 一 定 要 用 空格 隔 
开 。 例 如 ,margin: 10px 5px; 表示 上 外 边 距 和 下 外 边 距 为 10px, 右 外 边 距 和 左 外 边 距 
为 5px。 

取 3 个 值 : 上 边框 使 用 第 一 个 值 ,左右 边框 使 用 第 二 个 值 ,下 边框 使 用 第 三 个 值 , 取 值 
之 间 要 用 空格 隔 开 。 例 如 ,margin: 10px 5px 15px; 表示 上 外 边 距 为 10px, 右 外 边 距 和 左 
外 边 距 为 5px, 下 外 边 距 为 15px。 

取 4 个 值 : 4 条 边框 按照 上 、 右 ,下 、 左 的 顺序 来 调用 取 值 。 取 值 之 间 也 要 用 空格 隔 开 。 
例如 ,“margin:10px 5px 15px 20px; ”表示 上 外 边 距 为 10px. 右 外 边 距 为 5px, 下 外 边 距 为 
15px, 左 外 边 距 为 20px。 

【 例 7-11】 外 边 距 设置 。 


<! -- 程序 7- 11.html --> 
<html> 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 外 边 距 设置 </title> 
< style type = "text/css"> 
* {margin: Opx;} 


#all{width:400px; 
height :300px; 
margin:0px auto; 
background — color: ## CCCCCC; 
} 
提 a, 提 b, 提 c, 提 d, 提 efwidth:150px; 
height :50px; 


text — align:center; 
background — color: #999999; 


} 
#a{fmargin— left:5px; 
margin — bottom:20px; 
1 
井 bfmargin- left:5px; 
margin — right :5px; 
margin — top:6px; 
float: right; 
#3c{margin - bottom:5px;} 
#e{fmargin— left:5px; 
margin ~ top:15px; 
] 
</style> 
</head> 
<body> 
<div id= "all"> 
<div id= "a">a 盒子 </div> 
<div id= "b">b 盒 子 </div> 
<div id= "c">c 盒 子 </div> 
<div id= "d">d 盒子 </div> 
<div id= "e">e 盒 子 </div> 
</div> 
</body> 
</html > 





本 例 中 共 设 置 了 5 个 盒子 ,由 于 b 盒子 设置 为 向 右 浮动 ,因此 紧 随 其 后 的 c 盒子 自然 
“ 流 ” 上 来 ,和 b 盒子 并 列 同 一 行 ,a 盒子 设置 为 “margin-bottom:20px;”, 而 c 盒子 没有 设置 
margin-top, 故 a 盒子 与 c 盒子 之 间 的 距离 为 20 像素 ,b 盒子 设置 为 “margin-top:6px;”, 所 
以 a 盒子 与 b 盒子 之 间 的 距离 为 20 十 6 二 26 像素 ,其 浏览 效果 及 各 盒子 的 关系 如 图 7-15 


所 示 。 
2. 边框 样式 设置 


元 素 外 边 距 内 就 是 元 素 的 边框 (border) 。 元 素 的 边框 就 是 围绕 元 素 内 容 和 内 边 距 的 一 
条 或 多 条 线 。 在 HTML 中 是 用 表格 来 创建 文本 周围 的 边框 ,而 通过 使 用 CSS 边框 属性 , 则 
可 以 创建 出 效果 更 佳 的 边框 ,并 且 可 以 应 用 于 任何 元 素 。 作 为 盒 模 型 的 组 成 部 分 之 一 ,边框 
的 CSS 样式 设置 不 但 影响 到 盒子 的 尺寸 ,还 影响 到 盒子 的 外 观 。 边 框 的 属性 有 3 种 : 样式 


(border-style) 、 宽 度 (border-width) 及 颜色 (border-color)。 


CSS 布局 


击 忆 蛋 


Web 前 总 谴 计 与 开发 一 一 HTML5 十 CSS3 十 JavaScript 微 课 版 





访 外 边 距 设置 -Windows Internet Explorer 加 回国 


文件 EE) ”编辑 下 ) 查看 WD 收藏 来 忆 ) 工具 CI) 才 助 0 











扣 曲 ”ral 直 材 S 作 [ 人 |[X| | 入 se ][2[] 








帘 收 藏 天 | 大 外 汉中 设置 [二 局 磺 ”页 面 D) ”安全 G) 
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7-15 外 边 距 关系 图 


样式 是 边框 最 重要 的 一 个 方面 ,这 不 是 因为 样式 控制 着 边框 的 显示 (虽然 样式 确实 控制 
着 边框 的 显示 ) ,而 是 因为 如 果 没 有 样式 ,就 根本 没有 边框 。 
CSS 的 border-style 属性 定义 了 10 个 不 同 的 样式 ,包括 none。 具 体 取 值 如 表 7-1 


所 示 。 


取 值 


表 7-1 border-style 属性 取 值 
说 明 


none 
hidden 
dotted 
dashed 
solid 
double 
groove 
ridge 
inset 
Outset 


inherit 


与 none 相同 ,但 应 用 于 表 时 除外 ,对 于 表 ,hidden 用 于 解决 边框 冲突 
定义 点 状 边框 。 在 大 多 数 浏览 器 中 呈现 为 实 线 

定义 虚线 。 在 大 多 数 浏览 器 中 呈现 为 实 线 

定义 实 线 

定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 

定义 3D 凹 型 线 边 框 。 其 效果 取决 于 border-color 的 值 

定义 3D 凸 型 线 状 边框 。 其 效果 取决 于 border-color 的 值 

定义 3D 嵌入 式 边框 。 其 效果 取决 于 border-color 的 值 

定义 3D 和 嵌 出 式 边 框 。 其 效果 取决 于 border-color 的 值 


规定 应 该 从 父 元 素 继承 边框 样式 


border-style 是 一 个 复合 属性 ,可 以 同时 取 1 一 4 个 值 。 取 值 方法 与 margin 一 样 。 如 果 
希望 为 元 素 框 的 某 一 个 边 设置 边框 样式 ,可 以 使 用 的 单 边 边框 样式 属性 包括 border-top- 


style border-right-style\border-bottom-style 和 border-left-style。 
【 例 7-12】〗 设置 边框 样式 。 


<! -- 程序 7- 12.html --> 
< html > 
< head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title > 设置 边框 样式 </title> 
<style type = text/css> 
h2{font - family: 黑 体 ; font - size:18px; 
border - style: double 
有 
.pl{font - family: 隶 书 ;font - size:16px; 
border — top— style:dotted; 
border — bottom— style:dashed; 
border - left ~ style: solid; 
border -right - style:double; 





</style> 
</head> 
<body> 
<center ><h2 > 设置 边框 样式 </h2 ></center > 
<hr> 
这 段 文字 没有 应 用 边框 样式 。 
<p class = pl > 这 段 文字 应 用 了 边框 样式 属性 ,设置 上 边框 为 点 线 , 下 边框 为 虚线 , 左边 框 为 实 
线 ,右边 框 为 双 实 线 。</p> 
</body> 
</html > 


本 例 定义 标题 h2 的 边框 样式 时 应 用 了 复合 属性 ,将 4 条 边 均 定 义 为 双 直线 ,段落 pl 则 
应 用 边框 的 单 边 属性 分 别 设置 了 不 同样 式 的 4 条 边 ,浏览 效果 如 图 7-16 所 示 。 
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图 7-16 设置 边框 样式 
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2) 边框 的 宽度 

在 CSS 中 ,可 利用 边框 宽度 属性 (border-width) 来 控制 边框 的 粗细 ,为 边框 指定 宽 
两 种 方法 : 一 种 是 直接 指定 长 度 值 ,如 2px 或 0.1cm; 另 一 种 是 使 用 3 个 关键 字 之 一 ， 
分 别 是 thin( 细 边框 )、medium( 中 等 边框 ,默认 值 ) 和 thick( 粗 边框 )。 





度 有 


它们 





与 border-style 属性 相同 ,border-width 也 是 一 个 复合 属性 , 若 要 设置 其 单 边 属 性 ,同样 
可 以 使 用 4 个 单 边 属性 设置 边框 各 边 的 宽度 , 即 border-top-width、 border-right-width、 





border-bottom-width 和 border-left-width。 
【 例 7-13】 设置 边框 宽度 。 


RE 程序 7 二 13. al 一 二 > 
<html > 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title > 设置 边框 宽度 </title> 
<style type = text/css> 
h2{font - family: 黑 体 ; font - size:18px; 
border - bottom— style:dotted; 
border - bottom— width:thick 
1 
.pl{font -family: 隶 书 ; font- size:15px; 
border - style:dotted solid double 
.p2{border - style:dotted solid double; 
border - width:5px 10px 15px 20px; 
于 
.Pp3{border - style:none; 
border — width: 50px; 
由 
</style> 
</head> 
<body> 
<center > < h2 > 设置 边框 宽度 </h2 > </center> 
ER 


<p class = pl > 这 段 文 字 的 上 边框 为 点 线 , 左 右边 框 为 实 线 , 下 边框 为 双 直线 。</p> 





<Pp class =p2> 边 框 样式 和 上 一 段 文字 的 一 样 , 只 是 该 段 文 字 应 用 边框 宽度 属性 设置 了 上 、 


右 、 下 ,左边 框 的 宽度 分 别 为 5 像素 .10 像素 .15 像素 和 20 像素 。</p> 
<p class = p3 > 边框 样式 为 无 ,边框 的 宽度 是 50px。</p> 

</body> 

</html > 


本 例 中 定义 了 3 个 段落 ,浏览 效果 如 图 7-17 所 示 ,pl 的 边框 宽度 都 按 默认 值 显 示 ,p2 


的 边框 宽度 则 按 指定 值 显示 ,但 p3 段落 则 出 现 了 问题 ,尽管 边框 的 宽度 为 50px. 但 是 


边框 


样式 设置 为 none。 在 这 种 情况 下 ,不 仅 边框 的 样式 没有 了 ,边框 也 消失 了 ,这 是 因为 如 果 边 
框 样式 为 none, 即 边框 根本 不 存在 .那么 边框 就 不 可 能 有 宽度 ,因此 边框 宽度 自动 设置 为 0， 


而 不 论 原 先 定义 的 是 什么 。 
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左 文 字 的 上 过 框 为 点 线 ， 安 有 过 民 为 实 线 ， 下 过 
凤 直线 。 


癌症 祥 区 向 上 一度 广 学 的 一 样 ， 失 是 该 积 文学 应 ”| 
边框 宽度 属性 设置 了 上 、 右 、 下 、 左 边框 的 宽 
分 别 为 5 你 素 、10 父 素 、15 像 率 和 20 像 素 。 


边框 样式 为 无 ， 边 框 的 宽度 是 50px。 





图 7-17 设置 边框 宽度 


专家 点 拨 : 由 于 border-style 的 默认 值 为 none, 如 果 没 有 声明 样式 ,就 相当 于 border- 


style; none。 因 此 ,如 果 和 希望 边框 出 现 , 就 必须 声明 一 个 边框 样式 。 
3) 边框 的 颜色 


设置 边框 颜色 非常 简单 。CSS 使 用 一 个 简单 的 border-color 属性 ,该 属性 同样 可 以 选 
择 单条 边框 设置 或 统一 设置 4 条 边 的 颜色 。 既 可 以 使 用 任何 类 型 的 颜色 值 , 也 可 以 命名 颜 


色 ,还 可 以 使 用 十 六 进 制 或 RGB 值 , 如 : 


pt 
border - style: solid; 
border - color: blue rgb(25% ,35% ,45%) 井 909090 red; 


: 


【 例 7-14】 设置 边框 颜色 。 


<! -- 程序 7- 14.html -一 > 
<html> 
<head> 


<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 


<title> 边 框 颜色 设置 </title> 
< style type = "text/css"> 
< {margin: Opx;} 
#all{width:400px; height :270px; 
margin:0px auto; 
background - color: #ccc; 
井 a, 井 b, 井 c, 井 d 井 e 井 E, 井 gfwidth:160px;height:50px; 
text ~ align: center; 
line — height:50px; 
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background — color: # eee; 
上’ 
#a{width:380px;margin: 5px; 
border — width: 5px 10px; 
border — style:outset; 
border — color: #FFOOFF; 
井 b{border:20px solid 井 333; 
float: right; 
#c{margin— left:5px; 
border:20px groove 井 f007 
b 
#d{margin— left:5px; 
border:2px dotted blue; 
float: left; 
1 
井 efmargin ~ top:5px; 
border — width:5px7 
border — style: groove; 
border - color:aqua red blue yellow; 





float: left; 
上 
</style> 
</head> 
<body> 


<div id= "all"> 
<div id= "a">a 盒 子 </div> 
<div id= "b">b 盒 子 (solid 类 型 )</div> 
<div id= "c">c 盒 子 (groove 类 型 )</div> 
<div id= "d">d 盒 子 (dotted 类 型 )</div> 
<div id= "e">e 盒 子 </div> 
</div> 
</body> 
</html > 





本 例 浏览 效果 如 图 7-18 所 示 。 

3. 内 边 距 的 设置 

元 素 的 内 边 距 用 来 控制 边框 和 内 容 区 之 间 的 空白 距离 ,控制 该 区 域 最 简单 的 属性 是 
padding 属性 ,类 似 于 HTML 中 表格 单元 格 的 填充 属性 。 内 边 距 (padding) 和 外 边 距 
Cmargin) 很 相似 ,都 是 不 可 见 的 盒子 组 成 部 分 ,只 是 内 边 距 和 外 边 距 之 间 夹 着 边框 。 从 语法 
和 用 法 上 来 说 ,内 边 距 的 属性 与 外 边 距 的 属性 也 是 类 似 的 , 既 可 以 使 用 复合 属性 ,也 可 以 使 
用 单 边 属性 ,padding 属性 接受 长 度 或 百分比 值 .但 不 允许 使 用 负 值 。 百 分 比值 是 相对 于 划 
父 元 素 的 width 计算 的 ,这 一 点 与 外 边 距 相同 。 所 以 ,如 果 父 元 素 的 width 改变 ,它们 也 会 
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图 7-18 设置 边框 颜色 


【 例 7-15】 内 边 距 的 设置 。 


<! -- 程序 7- 15.html --> 
<html> 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 内 边 距 的 设置 </title> 
<style type = "text/css"> 
x* {margin: Opx;} 
#all{width:360px; height :300px; 
margin: Opx auto; 
padding:25px; 
background - color: # CCCCCC; 
} 
井 a 井 b, 井 c, 井 砂 井 er 井 f, 井 gfwidth:160px;height:50px; 
border:1px solid 井 000; 
background — color: # FFFFFF; 
1 
p{width:80px;height :30px; 
padding — top:15px; 
background - color: #999999; 
} 
a{padding— left:50px;} 
b{padding — top:50px;} 
#c{padding— right:50px;} 
d{padding — bottom:50px;} 
</style> 
</head> 
<body> 
<div id= "all"> 
<div id= "a"><p>a 盒 子 </p></div> 
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<div id= "b"><p>b 盒 子 </p></div> 
<div id= "c"><p>c 盒 子 </p></div> 
<div id= "d"><p>d 盒子 </p></div> 
</div> 
</body> 
</html> 


本 例 的 浏览 效果 如 图 7-19 所 示 。 


文件 四 ”编辑 EE) 查看 WW) 收 若 夹 忆 工具 CD) 帮助 9 
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7-19 内 边 距 的 设置 


7.2.4 边框 控制 


通过 CSS3 能 够 创建 圆 角 边框 .向 矩形 添加 阴影 、 使 用 图 片 来 绘制 边框 等 ,并 且 这 些 都 


不 需 使 用 设计 软件 。 
CSS3 新 增 边 框 属性 如 下 。 


border-radius: 设置 所 有 4 个 border-*x -radius 属性 的 简写 属性 。 


box-shadow: 向 方 框 添加 一 个 或 多 个 阴影 


border-image: 设置 所 有 border-image- * 属性 的 简写 属性 。 


1. CSS3 圆 角 边框 


在 CSS2 中 添加 圆 角 和 矩形 需要 技巧 ,必须 为 每 个 圆 角 使 用 不 同 的 图 片 。 但 在 CSS3 中 创 
建 圆 角 却 是 非常 容易 的 。 在 CSS3 中 .border-radius 属性 用 于 创建 圆 角 。 





【 例 7-16】 CSS3 圆 角 边框 。 





<! -- 程序 7- 16.html--> 
<! DOCTYPE html > 


俭 - 目 - 口 吉 ~ 


<html> 

<head> 

<style> 

div 

{text — align:center; 

border:2px solid #alalal; 

padding:10px 40px; 

background: # dddddd; 

width:350px; 

border — radius:25px; 

一 moz 一 border - radius:25px; /x* 老 的 Firefox */ 
</style> 

</head> 

<body> 

<div> border - radius 属性 允许 您 向 元 素 添 加 圆 角 .</div> 
</body> 

</html > 








本 例 的 效果 如 图 7-20 所 示 。 


border-radius 属性 允许 您 向 元 素 添 ) 

















图 7-20 CSS3 圆 角 边框 


2. CSS3 阴影 
在 CSS3 中 ,box-shadow 用 于 向 方 框 添 加 阴影 。 
【 例 7-17】 CSS3 阴影 。 


cae | HL 二 二 全 

<! DOCTYPE html > 

<html> 

<head> 

<style> 

div 

{ 

width:300px; 

height:100px; 

background— color: #ff9900; 

一 moz — box — shadow: 10px 10px 5px 井 888888; /* 老 的 Firefox x*/ 
box— shadow: 10px 10px 5px #888888; 
1 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html > 
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本 例 的 效果 如 图 7-21 所 示 。 








7-21 CSS3 阴影 效果 


7.3 CSS 元素 的 定位 


由 于 盒 模型 的 限制 ,导致 元 素 无 法 在 页 面 中 随意 地 摆 放 ,但 是 网 页 内 容 需 要 一 些 能 随意 
摆 放 的 元 素 ,为 此 ,CSS 提供 了 绝对 定位 模式 和 相对 定位 模式 来 解决 ,这 两 种 定位 模式 需要 
设置 CSS 的 position 属性 。 

在 CSS 布局 中 ,position 属性 非常 重要 ,很 多 特殊 容器 的 定位 必须 用 position 来 完成 。 
position 属性 有 4 个 值 ,分 别 是 static absolute fixed 和 relative, 其 中 static 为 默认 值 ,代表 
无 定位 (一 般 用 于 取消 特殊 定位 的 继承 ,恢复 默认 ) 。 

定位 有 一 个 缺点 一 一 不 会 自 适 应 内 部 元 素 的 高 度 ,所 以 平时 在 布局 页 面 时 ,如 果 某 个 或 
某 些 模块 高 度 永远 不 变 ,就 可 以 用 定位 。 建 议 大 家 布局 页 面 时 ,还 是 要 以 float 为 主 ， 
position 为 辅 ,这 样 才能 制作 出 高 质量 的 页 面 。 


7.3.1 CSS 绝对 定位 


绝对 定位 在 几 种 定位 方法 中 使 用 最 广泛 ,这 种 方法 能 够 很 精确 地 将 元 素 移动 到 想 要 的 
位 置 。 当 容器 的 position 属性 值 为 absolute 时 ,说 明 这 个 容器 被 绝对 定位 了 ,此 时 该 容器 前 
面 或 后 面 的 容器 都 会 认为 该 容器 不 存在 , 即 这 个 容器 浮 于 其 他 容器 上 , 它 是 独立 出 来 的 ,类 
似 于 Photoshop 软件 中 的 图 层 。 

Photoshop 的 图 层 有 上 下 关系 ,绝对 定位 的 容器 也 有 上 下 关系 ,在 同一 个 位 置 时 只 显示 
最 上 面 的 容器 。 在 计算 机 显示 中 把 垂直 于 显示 屏幕 平面 的 方向 称 为 z 方 向 ,CSS 绝 对 定位 
容器 的 z-index 属性 就 对 应 这 个 方向 ,z-index 属性 的 值 越 大 ,容器 越 靠 上 。 即 同一 个 位 置 上 
的 两 个 绝对 定位 的 容器 只 会 显示 z-index 属性 值 较 大 的 。 而 当 容 器 都 没有 设置 z-index 属性 
值 时 ,默认 后 面 的 靠 后 的 容器 z 值 大 于 前 面 的 绝对 定位 的 容器 。 

如 果 容 器 设置 了 绝对 定位 ,默认 情况 下 ,容器 将 紧 挨 着 其 父 容器 对 象 的 左边 和 顶部 , 即 
父 容器 对 象 左 上 角 。 定 位 的 方法 为 在 CSS 中 设置 容器 的 top( 顶 部 )、bottom( 底 部 ) ,left( 左 
边 ) 和 right( 右 边 ) 的 值 ,这 4 个 值 的 参照 对 象 是 浏览 器 的 4 条 边 。 

【 例 7-18】 绝对 定位 实例 。 

















<! -- 程序 7- 18.html --> 

<html> 

<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> CSS 绝对 定位 </title> 
<style type = "text/css"> 


< {margin: Opx;padding:0px;} 
##all{height:1200px;width:500px; 
margin— left:20px; 
background — color: # eee; 
. 
井 fixed, 井 fixed2, 井 fixed3, 井 fixed4, ##fixed5{width:180px; height :50px; 
border:5px double #000000; 
position:absolute; 
有 
# fixed{top:10px; left:10px; 
background — color: 井 99CC99; 
} 
#fixed2{top:50px; left:50px; 
background - color: # FFFFFF; 
1 
#fixed3{bottom:10px; left:50px; 
background — color: # FFFFFF; 
1 
# fixed4{ top:40px; right :50px; 
z— index:10; 
background - color: # FFFFFF; 
# fixed5{ top:20px; right :90px; 
z— index:9; 
background — color: #999999; 
} 
井 a, 井 b, #c{width:300px;height:100px; 
border:1px solid 井 000000; 
background - color: #CCCCCC; 
} 
</style> 
</head> 
<body> 
<div id= "all"> 
<div id = "fixed"> 第 1 个 绝对 定位 的 div 容器 </div> 
<div id= "fixed2"> 第 2 个 绝对 定位 的 div 容器 </div> 
<div id= "fixed3"> 第 3 个 绝对 定位 的 div 容器 </div> 
<div id= "fixed4"> 第 4 个 绝对 定位 的 div 容器 </div> 
<div id = "fixed5"> 第 5 个 绝对 定位 的 div 容器 </div> 
<div id = "a"> 第 1 个 无 定位 的 div 容器 </div> 
<div id= "b"> 第 2 个 无 定位 的 div 容器 </div> 
<div id= "c"> 第 3 个 无 定位 的 div 容器 </div> 
</div> 
</body> 
</html > 





本 例 的 浏览 效果 如 图 7-22 所 示 。 














从 本 例 可 以 看 到 ,设置 top、bottom、left 和 right 中 至 少 一 种 属性 后 ,5 个 绝对 定位 的 
div 容器 彻底 摆脱 了 其 父 容器 (id 名 称 为 all) 的 束缚 ,独立 地 漂浮 在 上 面 。 而 在 未 设置 
z-index 属性 值 时 ,第 2 个 绝对 定位 的 div 容器 显示 在 第 1 个 绝对 定位 的 div 容器 上 方 ( 即 后 
面 的 容器 z-index 属性 值 较 大 )。 相 应 地 ,第 5 个 绝对 定位 的 div 容器 虽然 在 第 4 个 绝对 定 
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位 的 div 容器 后 面 , 但 由 于 第 4 个 绝对 定位 的 div 容器 的 z-index 值 为 10, 第 5 个 绝对 定位 
的 div 容器 的 z-index 值 为 9, 因此 第 4 个 绝对 定位 的 div 容器 显示 在 第 5 个 绝对 定位 的 div 
容器 的 上 方 。 

专家 点 拨 : 读者 可 以 随意 拖 动 浏览 器 的 窗口 大 小 ,观察 绝对 定位 的 div 容器 的 位 置 变化 。 





CSS 绝对 定位 - Windows Internet Ezplorer 辐 回 国 
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图 7-22 CSS 绝 对 定位 


7.3.2 CSS 固定 定位 


司 定 定位 和 绝对 定位 非常 类 似 ,但 被 定位 的 容器 不 会 随 着 滚动 条 的 拖 动 而 变化 位 置 , 即 
在 视野 中 ,固定 定位 的 容器 的 位 置 是 不 会 改变 的 。 当 容器 的 position 属性 值 为 fixed 时 ,这 
个 容器 即 被 固定 定位 了 。 

【 例 7-19】 设置 CSS 固定 定位 。 
































< = 起 序 7=19. hinl 一 = 二 
<html > 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> CSS 固定 定位 </title> 
< style type = "text/css"> 
* {margin: Opx;padding:0px;} 
#all{width:400px; height :800px; 
background - color: # CCCCCC; 
下 
# fixed{width:150px;height :80px; 
border:15px outset #f00; 
background — color: # CCCCFF; 
position: fixed; 





top:80px; left:50px; 
E 
#a{width:200px;height:300px; 
margin— left:20px; 
background - color: # FFFFCC; 
border:5px solid #000000; 
4 
</style> 
</head> 
<body> 
<div id= "all"> 
<div id= "fixed"> 固 定 定 位 的 容器 </div > 
<div id= "a"> 无 定位 的 div 容器 </div> 
</div> 
</body> 
</html > 








本 例 的 浏览 效果 如 图 7-23 所 示 。 
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图 7-23 CSS 固定 定位 
读者 可 以 尝试 拖 动 浏览 器 的 垂直 滚动 条 ,固定 容器 不 会 有 任何 的 位 置 改 变 。 需 要 注意 
一 点 ,IE 6.0 版 本 的 浏览 器 不 支持 position 的 fixed 属性 ,所 以 网 上 类 似 的 效果 都 是 采用 
JavaScript 脚本 编程 完成 的 。 
7.3.3 CSS 相对 定位 


相对 定位 与 其 他 定位 相似 ,也 是 独立 出 来 浮 在 上 面 的 。 不 过 相对 定位 容器 的 top( 顶 
部 ) bottom( 底 部 ) \left( 左 边 ) 和 right( 右 边 ) 属 性 的 参照 对 象 是 其 父 容器 的 4 条 边 ,而 不 是 
浏览 器 窗口 ,并且 相对 定位 的 容器 浮上 来 后 ,其 所 占 的 位 置 仍然 留 有 空位 ,后 面 的 无 定位 容 
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器 不 会 “ 挤 ” 上 来 。 

当 容 器 的 position 属性 值 为 relative 时 ,这 个 容器 即 被 相对 定位 了 。 相 对 定位 是 一 个 非 
常 容易 掌握 的 概念 。 如 果 对 一 个 元 素 进行 相对 定位 , 它 将 出 现在 它 所 在 的 位 置 上 。 然 后 可 
以 通过 设置 垂直 或 水 平 位 置 , 让 这 个 元 素 “ 相 对 于 ” 它 的 起 点 进行 移动 。 如 果 将 top 设置 为 
20px, 那 么 容器 将 在 原 位 置 项 部 下 面 20 像素 的 地 方 ; 如 果 将 left 设置 为 30px, 那 么 容器 会 
在 元 素 左边 创建 30 像素 的 空间 ,也 就 是 将 元 素 向 右 移动 ,如 图 7-24 所 示 。 
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图 7-24 相对 定位 示意 图 
【 例 7-20】 CSS 相对 定位 。 


<! -=- 程序 7- 20.html --> 
<html> 
<head> 
<meta http - equiv= "Content - Type" content = "text/html; charset = gb2312" /> 
<title> CSS 相对 定位 </title> 
< style type = "text/css"> 
x {margin: Opx;padding:0px;} 
#all{width:400px; height :400px; 
background - color:#ccc; 
| 
#fixed{width:120px;height:80px; 
border:15px ridge 井 f00; 
background - color: #999999; 
position:relative; 
top:20px; left :30px; 
} 
#a, #b{width:250px; height :120px; 
background - color: # eee; 
border:2px outset #000; 





} 
#b{ 
float: right; 
</style> 


</head> 
<body> 


<div id= "all"> 

<div id= "a"> 第 1 个 无 定位 的 div 容器 
<div id= "fixed"> 相 对 定位 的 容器 </div> 

</div> 
<div id= "b"> 第 2 个 无 定位 的 div 容器 </div> 

</div> 

</body> 
</html > 








本 例 浏览 效果 如 图 7-25 所 示 。 
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图 7-25 CSS 相对 定位 


从 图 7-25 中 可 以 看 出 ,相对 定位 的 容器 其 实 并 未 完全 独立 ,浮动 范围 仍然 在 父 容器 内 ， 
并 且 其 所 占 的 空白 位 置 仍然 有 效 地 存在 于 前 后 两 个 容器 之 间 。 也 就 是 说 ,在 使 用 相对 定位 
时 ,无论 是 否 进行 移动 ,元素 仍 然 占据 原来 的 空间 。 因 此 ,移动 元 素 会 导致 它 覆 盖 其 他 框 。 


7.4 上 机 练习 与 指导 


7.4.1 编写 典型 的 网 页 布局 


本 节 综 合 前 面 学 习 的 布局 知识 ,练习 制作 比较 典型 的 网 页 布局 。 其 布局 要 求 如 下 。 

页 面 要 求 有 上 下 4 行 区 域 , 分 别 为 顶部 广告 区 .导航 区 .主体 区 和 底部 版 权 区 ,而 主体 区 
又 分 为 左右 两 个 大 区 , 左 区 域 为 文章 列表 区 , 右 区 域 为 3 个 主体 内 容 区 ,如 图 7-26 所 示 。 

从 图 7-26 可 以 看 出 整个 页 面 的 结构 ,用 #top 代表 项 部 广告 区 、# nav 代表 导航 区 、 
# mid 代表 主体 区 、# left 代表 # mid 所 包含 的 左 区 域 、# right 代表 并 mid 所 包含 的 右 区 
域 .# bt 代表 底部 版 权 区 。 参 考 代码 如 下 : 


区 





区 





区 
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顶部 广告 区 

导航 区 

文章 列表 区 内 容 A 内 容 B 
内 容 C 

底部 版 权 区 








图 7-26 网 页 布局 结构 图 





float: right; 
#3c{width:398px;height:98px; 
background — color: # FFCCCC; 
} 
footer{height:80px; 
background — color: # EAE4E4; 
4 


</style> 


</head> 
<body> 


<div id= "top"> 顶 部 广告 区 </div> 

<div id= "nav"> 导 航 区 </div> 

<div id= "mid">< div id= "left"> 文 章 列表 区 </div> 

<div id= "right"> 
<div class = "content”id="a"> 内 容 A</div> 
<div class = "content" id = "b"> 内 容 B</div> 
<div class= "content" id = "c"> 内 容 C</div> 

</div> 

<div id= "footer"> 底 部 版 权 区 </div> 





</body> 
</html > 


该 代码 浏览 效果 如 图 7-27 所 示 。 
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图 7-27 典型 网 页 布局 效果 
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7.4.2 利用 CSS 定位 制作 导航 条 


用 position 来 布局 页 面 , 父 级 元 素 的 position 属性 必须 为 relative, 而 定位 于 父 级 内 部 
某 个 位 置 的 元 素 ,最 好 用 absolute, 因 为 它 不 受 父 


级 元 素 的 padding 属性 影响 , 当然 也 可 以 用 
position, 但 计算 的 时 候 不 要 忘记 padding 的 值 。 
本 节 练 习 将 页 面 的 头 部 Logo 区 域 用 定位 
(position) 来 布局 制作 一 个 导航 条 ,其 效果 如 图 7-28 
所 示 。 
图 7-28 导航 条 效果 图 相关 CSS 的 参考 代码 如 下 ,DIV 布局 代码 请 
读者 自行 完成 。 














忆 一 上 机 练习 7 一 2:Gss -> 
/*# 公共 部 分 */ 
body, div, a, img, p, form, hl, h2, h3, h4, h5, h6, input, textarea, ul, li, dt, dd, dl {margin: 0; 
padding:0;} 
井 Logo, 井 Nav, 井 Banner, 井 Content, 井 Footer{f width:900px; margin:0 auto;}/ * 头 部 Logo 区 域 */ 
井 Logo{f height:110px; 

position:relative; /x 相对 定位 x*/ 


1 
#1logoLink{ display:block; 
width: 320px; 
height :81px; 
background:url(. .Vimg/7 - 2. gif) no - repeat; 
position:absolute; 
top:20px; left:0; 


| 
/* 导航 条 */ 
井 Nav{ height :42px;} 
#Nav ul{height :42px; 
list— style:none; 
background: 井 56990c:; 
看 
#3Nav ul 1i{height:42px; float:left;} 
井 Nav ul li afdisplay:block'; 
/* 转化 成 块 状元 素 , 因 链接 是 内 链 元 素 , 若 想 给 它 定义 下 面 的 属性 ,必须 将 它 转化 成 块 状元 素 * / 
height :42px; 
Color: # FFF; 
padding:0 10px; 
line— height :42px; 
font — size:14px; 
font ~ weight :bold; 
font ~ family:Arial; 
text ~ decorat ion:none; 
/* 去 除 链接 样式 ,默认 是 有 下 画 线 的 ,加 上 这 句 就 没有 任何 样式 ,下 画 线 也 没有 了 =* / 
float: left; 
有 
提 Nav ul 1i a:hover{background: #68acd3;} 


7.5 本 章 习 题 








一 、 选 择 题 
1. CSS 是 利用 ( )XHTML 标记 构建 网 页 布局 的 。 
A. <dir> B. <div> C. <dis> D. < dif > 
2. 下 列 ( ) 属 性 能 够 设置 盒 模 型 的 左 侧 外 边 距 。 
A. margin B. indent C. margin-left D. text-indent 
3. CSS 中 ,下 列 ( ””) 是 盒 模型 的 属性 。 
A. font B. border C. padding D. visible 
4. 下 列 ( ”)CSS 属性 能 够 设置 盒 模型 的 内 补丁 为 10、.20、30、40( 顺 时 针 方 向 )。 
A. padding:10px 20px 30px 40px B. padding:10px lpx 
C. padding:5px 20px 10px D. padding:10px 
5. 边框 的 样式 可 以 包含 的 值 不 包括 ( Ns 
A. 粗细 B. 颜色 C. 样式 D. 长 短 
6.〈( ”) 显 示 这 样 一 个 边框 : 上 边框 10px、 下 边框 5px、 左 边框 20px、 右 边框 1px。 
A. border-width:10px 5px 20px lpx B. border-width:10px 20px 5px 1px 
C. border-width:5px 20px 10px lpx D. border-width:10px lpx 5px 20px 
二 、 填空 题 
1. 为 div 设置 类 a 与 b, 应 编写 HTML 代码 
2. 设置 CSS 属性 clear 的 值 为 时 可 清除 左右 两 边 浮动 。 
3. CSS 属性 可 为 元 素 设置 外 边 距 。 
4. 设置 CSS 属性 float 的 值 为 时 可 取消 元 素 的 浮动 。 
5. XHTML 默认 的 两 种 标签 为 和 


击 忆 届 


CSS 布局 





第 8 章 CSS 网 页 元 素 设计 


CSS 是 现代 网 页 设计 的 重要 基石 ,其 擅长 于 版 式 设 计 , 无 论 是 字体 类 型 ,还 是 颜色 背 
景 , 都 可 以 使 用 CSS 来 定义 。CSS 的 核心 内 容 就 是 属性 , 它 对 网 页 效果 产生 直接 作用 的 就 
是 一 个 个 的 属性 值 。 也 就 是 说 ,在 使 用 CSS 设计 网 页 后 ,浏览 器 中 最 后 呈现 的 所 有 网 页 效 
果 , 实 质 上 都 是 对 元 素 属性 值 的 解释 。 本 章 将 全 面 学 习 网 页 中 的 各 种 元 素 ,以 便 更 加 灵活 地 
设计 网 页 的 版 面 。 

本 章 主要 内 容 如 下 。 

。 字体 样式 的 设置 。 

。 段落 样式 的 设置 。 

。 颜色 与 背景 的 设置 。 

。 图片 样式 的 控制 。 




















8.1 文本 的 设置 


在 CSS 中 有 关 文 本 的 控制 ,包括 字体 属性 和 文本 属性 。 其 中 ,字体 属性 是 对 文字 大 小 、 
样式 及 外 观 的 控制 ,文本 属性 则 包括 字符 .单词 及 行 与 行 的 间距 等 ,主要 帮助 实现 对 文本 更 
加 精细 的 控制 。 


8.1.1 字体 的 设置 


在 HTML 中 设置 字体 是 使 用 < font > 标记 的 face 属性 ,而 CSS 字体 属性 包括 字体 族 
科 、 字 体 大 小 ,字体 样式 .字体 加 粗 及 字体 变 体 。 

1. 设置 字体 族 科 

字体 族 科 就 是 在 CSS 中 利用 font-family 属性 来 设置 文字 的 字体 。 基 本 格式 如 下 : 





font -family: 字体 1, 字体 2, 字体 3,…; 





应 用 font-family 属性 可 以 一 次 定义 多 个 字体 ,而 在 浏览 器 读 取 字 体 时 ,会 按照 定义 的 
先后 顺序 来 决定 选用 哪 种 字体 。 若 浏览 器 在 计算 机 上 找 不 到 第 一 种 字体 , 则 自动 读 取 第 二 
种 字体 , 若 第 二 种 字体 也 找 不 到 , 则 自动 读 取 第 三 种 字体 ,依次 类 推 。 如 果 定 义 的 所 有 字体 
都 找 不 到 , 则 选用 计算 机 系统 的 默认 字体 。 

在 定义 英文 字体 时 ,如 果 英 文字 体 名 由 多 个 单词 组 成 ,并 且 单词 之 间 有 空格 , 那 


么 一 定 
要 将 字体 名 用 引号 ( 单 引 号 或 双 引 号 ) 引 起 来 。 例 如 ,font-family:"Courier New" 表 示 定 义 


了 一 个 字体 为 Courier New。 
【 例 8-1】 字体 的 设置 。 
<! =- 程序 8=1.htal -> 


<html> 
<head> 


<meta http - equiv = "Content - Type" content = "text/htm1; charset = gb2312" /> 


<title> 在 CSS 中 设置 字体 </title> 
<style> 
h2{font 一 family: 黑 体 } 
p{font - family: 素 书 ,楷体 ,宋体 } 
</style> 
</head> 
<body> 
<center> 
<h2 > 用 font - family 属性 设置 字体 </h2 > 
</center> 
<hr> 
<p> 字 体 按照 隶书 ,楷体 、 宋 体 的 顺序 被 浏览 器 读 取 </p> 
</body> 
</html > 





本 例 定 义 标题 h2 的 字体 为 黑体 ,定义 段落 p 的 字体 族 科 先 后 顺序 为 隶书 、 楷 体 、 宋 体 。 
也 就 是 说 ,如 果 浏 览 器 在 计算 机 上 找 不 到 素 书 字体 ,就 改选 楷体 , 若 楷 体 也 没有 , 则 显示 宋 


体 。 浏览 效果 如 图 8-1 所 示 。 


在 C5S 中 设置 字体 -Windovs Intern... -| 右 | 区 | 
文件 人 妨 辑 E) 查看 WW 收藏 严 忆 ) 工具 CI) 帮助 人 0 
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8-1 用 font-family 设置 字体 


2. 设置 字号 








字号 就 是 对 文字 大 小 属性 的 控制 ,在 HTML 中 设置 字号 使 用 < font > 标记 的 size 属性 ， 
在 CSS 中 可 以 使 用 fontrsize 属性 来 设置 字号 ,在 HTML 中 设置 的 字号 仅 有 7 个 级 别 , 但 





CSS 中 的 字号 可 以 任意 设置 。 基 本 格式 为 : 


font -~ size: 绝对 尺寸 | 关键 字 | 相 对 尺寸 | 百分比 


(1) 绝对 尺寸 是 指 尺寸 大 小 既 不 会 随 着 显示 器 分 辩 率 的 变化 而 变化 ,也 不 会 随 着 显示 
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设备 的 不 同 而 变化 。 例 如 ,用 绝对 尺寸 设置 的 文字 在 显示 器 分 辩 率 为 960 像素 X 600 像素 
和 分 辩 率 为 1024 像素 X768 像素 下 所 显示 的 字号 是 一 样 的 。 使 用 绝对 尺寸 设置 文字 大 小 
时 一 定 要 加 上 单位 ,如 果 没 有 加 单位 ,浏览 器 会 默认 以 px( 像 素 ) 为 单位 。 绝 对 尺寸 可 以 使 
用 的 单位 有 in( 英 寸 )、.px( 像 素 ) .cm( 厘 米 ) .mm( 毫 米 ) .pt( 点 ) .pc( 皮 卡 )。 最 常用 的 单位 
为 px( 像 素 )。1 点 一 1/72 英寸 。 

(2) 相对 尺寸 是 指 尺寸 大 小 继承 该 元 素 属性 的 前 一 个 属性 单位 值 。 这 里 要 强调 的 是 ， 
如 果 是 在 该 元 素 的 font-size 属性 中 使 用 cm 为 属性 单位 ,那么 将 直接 继承 父 元 素 的 font- 
size 属性 , 若 没 有 父 元 素 , 则 参考 浏览 器 的 默认 字号 值 。 

(3) 绝对 尺寸 和 相对 尺寸 也 可 以 使 用 关键 字 来 定义 字号 。 绝 对 尺寸 的 关键 字 有 7 个 ， 
分 别 为 xx-small( 极 小 )、x-small( 较 小 ) small( 小 ) medium( 标 准 大 小 ) large( 大 ) 、x-large 
( 较 大 )、xx-large( 极 大 )。 相 对 尺寸 仅 有 两 个 关键 字 , 分 别 为 larger( 较 大 ) 和 smaller( 较 
小 )。 相 对 尺寸 的 larger 是 指 在 它 的 上 一 个 关键 字 基 础 上 扩大 一 级 ,smaller 则 是 在 它 上 一 
个 关键 字 基 础 上 缩小 一 级 。 

(4) 百分比 是 基于 父 元 素 中 字体 的 大 小 为 参考 值 的 。 例 如 : 


p{font ~ size:16pt} 
b{font — size:200%} 


这 两 行 代码 说 明 所 有 < p > 标记 中 用 < b > 标记 定义 的 文字 尺寸 大 小 ,是 在 < p > 标记 中 定 
义 的 文字 大 小 的 200% , 即 为 32pt。 
【 例 8-2】 字号 的 设置 。 


<! -- 程序 8-2.html --> 

<html > 

<head> 

<meta http - equiv = "Content ~ Type" content = "text/htm1; charset = gb2312" /> 

<title> 在 CSs 中 设置 字号 </title> 
< style> 
.zl{font— size:0.3in} 
.22{font— size:30px} 
.23{font— size:0.5cm} 
.24{font— size:10mm} 
.fl{font— size:xx— small} 
.f2{font— size:x— small} 
.f3{font— size: smaller} 
.f4{font— size: small} 
.f5{font — size:medium} 
.f6{font— size:large} 
</style> 

</head> 

<body> 
<center> 
< hi class = zl > 使 用 绝对 尺寸 设置 字号 大 小 </hi> 
</center> 
<hr> 


<p class = z2> 这 是 30 像素 大 小 的 文字 </p> 





<p class=z3> 这 是 0.5 厘米 大 小 的 文字 </p> 
<p class = z4> 这 是 10 毫米 大 小 的 文字 </p> 


<hr> 
< center > 


<hl class = f6 > 使 用 关键 字 设 置 字号 大 小 </h1> 


</center> 
<hr> 


<p class = fl > 这 是 关键 字 为 xx 一 small 的 字号 大 小 </p> 
<p class = f2 > 这 是 关键 字 为 x- small 的 字号 大 小 </p> 
<p class = f3 > 这 是 关键 字 为 smaller 的 字号 大 小 </p> 
<p class = f4 > 这 是 关键 字 为 small 的 字号 大 小 </p> 

<p class = f5 > 这 是 关键 字 为 mediun 的 字号 大 小 </p> 


<hr> 


<p class = xl > 使 用 百分比 设置 字号 大 小 </p> 
<p class = x2 > 使 用 上 一 行文 字 大 小 的 200% 显示 文字 </p> 


</body> 
</htnl> 


本 例 显示 了 font-size 的 各 种 取 值 ,浏览 效果 如 图 8-2 所 示 。 
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使 用 绝对 尺寸 设置 字号 大 小 


这 是 30 像 素 大 小 的 文字 


这 是 0. 5 厘米 大 小 的 文字 


这 是 10 毫 米 大 小 的 文字 


之 是 关 鱼池 广 zz-ca 


这 是 关键 李 为 z-:=a) 文 
这 是 关键 字 为 snaller 的 字号 大 小 

这 是 关键 字 为 snal1 的 字号 大 小 

这 是 关键 字 为 mediunm 的 字号 大 小 


使 用 关键 字 设 置 字号 大 小 


使 用 百分比 设置 字号 大 小 


使 用 上 一 


A 


行 


文字 大 小 的 200% 显 示 文 字 








图 8-2 CSS 中 设置 字号 
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3. 设置 字体 样式 
字体 样式 就 是 设置 字体 是 否 为 斜体 ,在 HTML 中 可 以 用 < i> 标 记 设 置 字体 为 斜体 ,而 
在 CSS 中 要 用 font-style 属性 来 设置 字体 是 否 为 斜体 。 基 本 格式 为 : 


font - style:normal |italic|oblique 





其 中 normal 表示 正常 显示 ,也 是 浏览 器 的 默认 样式 。italic 表示 用 斜体 显示 文字 ,oblique 
则 表示 比 斜体 的 倾斜 角度 更 大 的 焉 斜体 。 
【 例 8-3】 字体 样式 的 应 用 。 


<! -- 程序 8-3.html --> 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 在 CSS 中 设置 字体 样式 </title> 
< style> 
.pl{font— style:normal} 
.Pp2{font— style:italic} 
.p3{font ~— style:oblique} 
</style> 
</head> 
<body> 
<center> 
< font size= 4 color = red face = 黑体 > 使 用 font- style 属性 </font> 
</center > 
<hr> 
<p class = pl > 这 是 属性 取 值 为 normal 的 正常 效果 </p> 
<p class = p2 > 这 是 属性 取 值 为 italic 的 斜体 效果 </p> 
<p class = p3 > 这 是 属性 取 值 为 oblique 的 牌 斜 体 效 果 </p> 
</body> 
</html > 





本 例 用 pl、p2、p3 3 个 类 样式 来 代表 字体 的 3 个 样式 ,实现 了 字体 的 正常 .斜体 及 牌 斜 
体 的 显示 ,浏览 效果 如 图 8-3 所 示 。 
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使 用 font-sty1e 属 性 








这 是 属性 取 值 为 normal 的 正常 效果 
世 虹 性 些 吾 代为 italic 的 阁 纸 尼 更 
过 旦 性 些 葡 盆 为 o571iguc 的 亚 赂 颖 改 更 
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图 8-3 字体 样式 设置 示例 


4. 设置 字体 加 粗 
在 CSS 中 用 来 设置 字体 加 粗 的 属性 为 font-weight, 基 本 格式 为 : 


font - weight: normal |bold|bolder|lighter|number 


其 中 normal 表示 正常 粗细 ,这 也 是 浏览 器 的 默认 显示 ; bold 表示 粗 体 ,粗细 约 为 数字 700; 
bolder 表示 加 粗 体 ; lighter 表示 细 体 , 比 正常 字体 还 细 一 些 ; number 则 是 用 数字 表示 字体 
的 粗细 ,其 数字 一 般 都 是 整 百 ,共有 9 个 级 别 (100 一 900) ,数字 越 大 字体 越 粗 。 


【 例 8-4】 字体 加 粗 的 应 用 。 


<! -- 程序 8-4.html --> 
<html > 
<head> 


<meta http - equiv= "Content - Type" content = "text/htm1; charset = gb2312" /> 


<title> 在 CSS 中 设置 字体 加 粗 </title> 
< style type = "text/css"> 
井 bl{ font - weight:normal} 
井 b2{ font - weight:bold} 
井 b3{ font - weight:bolder} 
井 b4{ font - weight:1lighter} 
井 b5{font - weight:100} 
井 b6{font - weight:400} 
井 b7{font - weight:700} 
井 b8{ font - weight:900} 
</style> 
</head> 
<body> 
<center> 
<h3 id = b8 > 使 用 font - weight 设置 字 体 加 粗 </h3> 
</center> 
<hr> 
<p id=bl>font- weight 属性 取 值 为 正常 粗细 效果 </p> 
<p id=b2 > font - weight 属性 取 值 为 粗 体 效果 </p> 
<p id=b3 > font - weight 属性 取 值 为 加 粗 体 效果 </p> 
<p id= b4 > font - weight 属性 取 值 为 细 体 效果 </p> 
<p id = b5 > font - weight 属性 取 值 为 100 的 效果 </p> 
<p id = b6 > font 一 weight 属性 取 值 为 400 的 效果 </p> 
<p id=b7>font 一 weight 属性 取 值 为 700 的 效果 </p> 
</body> 
</html > 





本 例 用 id 选择 符 定义 了 8 个 字体 加 粗 的 样式 类 ,显示 的 效果 如 图 8-4 所 示 。 


5. 设置 字体 变 体 


字体 变 体 就 是 设置 字体 是 否 显示 为 小 型 的 大 写字 母 .主要 用 于 设置 英文 字体 ,基本 格 
式 为 : 


font — variant :normal |small - caps 
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其 中 normal 表示 正常 的 字体 ,为 默认 值 ; small-caps 表示 英文 字体 显示 为 小 型 的 大 写字 母 。 
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使 用 font-weight 设 置 字体 加 粗 


font-weight 属 性 取 值 为 正常 粗细 效果 
font-weight 属 性 取 值 为 粗 体 效 果 
font-weight 属 性 取 值 为 加 粗 体 效果 
font-weight 属 性 取 值 为 细 体 效果 
font-weight 属 性 取 值 为 100 的 效果 
font-weight 属 性 取 值 为 400 的 效果 
font-weight 属 性 取 值 为 700 的 效果 
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图 8-4 fonrweight 的 应 用 示例 
【 例 8-5】 字体 变 体 的 应 用 。 


<! -- 程序 8-5.html --> 
< htm]l > 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 在 Css 中 设置 小 型 的 大 写字 母 </title> 
< style type = "text/css"> 
p{font ~ variant:small — caps} 
</style> 
</head> 
<body> 
<center> 
<h3 > 使 用 font - variant 属性 设置 字体 变 体 </h3 > 
</center> 
<hr> 
hello! you like css?… 小 写 的 英文 <br> 
<p> hellol you like css? … 小写 的 英文 字母 变 为 了 小 型 的 大 写字 母 </p> 
</body> 
</html> 





本 例 定义 段落 p 的 样式 为 英文 字体 显示 小 型 的 大 写字 母 .浏览 效果 如 图 8-5 所 示 。 

6. 组 合 设置 字体 属性 

font 属性 是 一 种 复合 属性 ,可 以 同时 对 文字 设置 多 个 属性 ,包括 前 面 的 字体 族 科 、 大 小 、 
风格 .加 粗 及 变 体 等 .基本 格式 为 : 
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使 用 font-variant 属 性 设置 字体 变 体 


hellolyou 1ike css?… 小 写 的 英文 
HELLO1IY0U LIKE Css?… 小 写 的 英文 字母 变 为 了 小 型 的 大 写字 母 





8-5 ”font-variant 的 应 用 示例 


font:font - family|font — size|font — style| font- weight |font — variant 








font 属性 主要 用 于 不 同 字体 属性 的 略 写 ,特别 是 可 以 定义 行 高 。 注 意 属性 与 属性 之 间 
一 定 要 用 空格 间隔 开 来 。 例 如 


p{font:italic bold small - caps 14pt/16pt 宋体 } 


该 行 代码 表示 设置 文字 为 斜体 加 粗 体 的 宋体 文字 , 且 大 小 为 14 点 , 行 高 为 16 点 ,其 中 
英文 字体 采用 小 型 的 大 写字 母 显示 。 

7. CSS3 字体 设置 新 特性 

Font-face 可 以 用 来 加 载 字 体 样式 ,而 且 它 还 能 够 加 载 服务 器 端的 字体 文件 ,在 客户 端 
显示 没有 安装 的 字体 。 例 如 : 


<p><font face= "arial"> arial courier verdana </font ></p> 


可 以 通过 这 种 方式 直接 加 载 字体 样式 ,因为 这 些 字体 (arial) 已 经 安装 在 客户 端 了 。 上 
例 的 这 种 写法 的 作用 等 同 于 下 句 利 用 font-family 属性 设置 的 效果 : 


<p><font style= "font- family: arial"> arial courier verdana </font ></p> 





CSS3 允许 使 用 服务 器 端 字 体 , 即 允 许 使 用 未 在 客户 端 安装 的 字体 样式 。 例 如 : 


@font - face { 

font - family: BorderWeb; 

src:url(BORDERWO. eot); 

} 

@font - face { 

font - family: Runic; 

src:url(RUNICMTO. eot); 

} 

. border { FONT— SIZE: 35px; COLOR: black; FONT— FAMILY: "BorderWeb" } 
.event { FONT— SIZE: 110px; COLOR: black; FONT 一 FAMILY: "Runic" } 
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此 例 中 声明 的 两 个 服务 端 字 体 , 其 字体 源 指向 "BORDERW0. eot” 和 “RUNICMTO. 
eot” 文 件 ,并 分 别 冠 以 “BorderWeb” 和 “Runic” 的 字体 名 称 。 声 明之 后 ,用 户 就 可 以 在 页 面 
中 使 用 “FONT-FAMILY: "BorderWeb"” 和 “FONT-FAMILY :"Runic"” 字 体 了 。 

这 种 做 法 使 得 开发 人 员 在 开发 中 如 果 需 要 使 用 一 些 特殊 字体 ,而 又 不 确定 客户 端 是 否 
已 安装 时 , 便 可 以 使 用 这 种 方式 。 


8.1.2 文本 的 排版 


文本 排版 主要 包括 字符 间距 .单词 间距 ,文字 修饰 .文本 排列 .段落 缩 进 及 行 高 的 设 
置 等 。 

1. 调整 字符 间距 

字符 间距 (letter-spacing) 用 来 控制 字符 之 间 的 间距 ,也 就 是 在 浏览 器 中 所 显示 的 字符 
间 的 空格 距离 。 同 时 间距 的 取 值 必须 符合 长 度 标准 ,其 基本 格式 为 : 





letter -spacing:normal | 长度 


其 中 normal 表示 间距 正常 显示 ,为 默认 设置 ; 长 度 包 括 长 度 值 和 长 度 单位 ,长 度 值 可 以 使 
用 负数 ,而 长 度 单位 可 以 使 用 8. 1. 1 节 讲 解 “设置 字体 ”时 介绍 的 所 有 单位 。 例 如 : 


.hffont - family: 黑 体 ;font - size:20pt; font- weight:bold; letter - spacing:normal} 
.pl{font- family: 宋 体 ;font - size:18px; letter - spacing:5px} 


该 段 代码 中 定义 了 标题 样式 类 h 的 字体 为 黑体 ,字号 为 20 点 , 粗 体 ,字符 间距 为 正常 。 
段落 样式 类 pl 的 字体 为 宋体 ,字号 为 18 像素 ,字符 间距 为 5 像素 。 

2. 调整 单词 间距 

单词 间距 (word-spacing) 和 字符 间距 是 类 似 的 属性 ,但 单词 间距 主要 用 来 设置 单词 之 
间 的 空格 距离 ,其 基本 格式 为 : 





word - spacing:normal| 长 度 


【 例 8-6】 字符 间距 与 单词 间距 。 


<! -- 程序 8- 6.html --> 
< htm]l > 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 应 用 间距 属性 </title> 
< style type = text/css> 
.hf font- family: 黑 体 ;font - size:20pt; font- weight:bold} 
.pl{font- family: 宋 体 ;font - size:18pxi letter - spacing:10px} 
.p2{font — family:"Time New Roman";font — size:18px;word — spacing:15px} 
</style> 
</head> 
<body> 
<center> 





<h2 class =h> 设 置 字符 间距 与 单词 间距 </h2> 

</center> 

he 

<p class = pl > 这 段 文 字 的 字符 间距 为 10 像素 </p> 

<p class = p2>this is a good book, many people 1ike. … 单 词 间 距 为 15 像素 </p> 
</body> 
</html > 


本 例 显示 了 字符 间距 与 单词 间距 的 区 别 , 浏 览 效 果 如 图 8-6 所 示 。 
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设置 字符 间距 与 单词 间距 


这 段 文字 的 字符 间距 为 10 像 素 


is a good book,many people like. 


单词 间距 为 15 像 素 
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图 8-6 letter-spacing 与 word-spacing 的 应 用 示例 


3， 添加 文字 修饰 


文字 修饰 (textrdecoration) 属 性 主要 是 对 文字 添加 一 些 常 用 的 修饰 ,如 下 画 线 和 删除 线 
等 ,其 基本 格式 为 : 


text - decoration: underline| oveline| line— through|blink|none 


其 中 underline 表示 给 文字 添加 下 夯 线 ; oveline 表示 给 文字 添加 上 画 线 ; line-through 表示 
给 文字 添加 删除 线 ; blink 表示 给 文字 添加 闪烁 (只 能 在 Netscape 浏览 器 中 正常 显示 )， 
none 表示 没有 文本 修饰 。 在 使 用 过 程 中 这 些 属 性 值 可 以 是 上 面 所 列 的 一 个 或 多 个 。 

CSS3 开始 支持 对 文字 的 更 深层 次 的 泻 染 ,例如 : 


div{ 

— webkit — text ~ fill ~ color: black; 

— webkit ~ text— stroke ~ color: red; 

— webkit ~ text— stroke 一 width: 2.75px; 


其 中 ,Text-fill-color 表示 文字 内 部 填充 颜色 ; Text-stroke-color 表示 文字 边界 填充 颜色 ; 
Text-stroke-width 表示 文字 边界 宽度 。 
4。 设置 文 本 排列 方式 人 
text-align 用 来 控制 文本 的 排列 和 对 齐 方式 ,其 功能 类 似 于 Word 工具 中 的 段落 对 齐 方 | 章 
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式 , 其 基本 格式 为 : 


text ~ align: left|right |center| justify 


其 中 left 表示 左 对 齐 方式 ; right 表示 右 对 齐 方式 ; center 表示 居中 对 齐 方式 ; justify 表示 
两 端 对 齐 方式 。 使 用 时 4 个 属性 值 可 以 任意 选择 其 中 一 个 。 

5. 设置 段落 缩 进 

段落 缩 进 (text-indent) 用 来 控制 每 个 文字 段落 的 首 行 缩 进 距离 ,其 基本 格式 为 : 


text - indent: 长 度 | 百分比 


其 中 长 度 包 括 长 度 值 和 长 度 单 位 ,长 度 单位 同样 可 以 使 用 之 前 提 到 的 所 有 单位 ; 百分比 则 
是 相对 上 一 级 元 素 的 宽度 而 定 的 。 

6. 调整 行 高 

行 高 (line-height) 用 来 控制 文本 内 容 之 间 行 与 行 的 距离 ,也 就 是 行 间距 ,其 基本 格 
式 为 ， 


line - height:normal| 数 字 | 长 度 | 百分比 


其 中 normal 为 浏览 器 默认 的 行 高 ,一般 由 字体 大 小 属性 来 决定 ;“ 数 字 " 表 示 行 高 为 该 元 素 
字体 大 小 与 该 数字 相 乘 的 结果 ;“ 长 度 ” 表 示 行 高 由 长 度 值 和 长 度 单位 确定 ;“ 百 分 比 ” 表 示 
行 高 是 该 元 素 字体 大 小 的 百分比 。 

【 例 8-7】 文本 的 排版 应 用 。 


<! -- 程序 8 一 7.html --> 
<html> 
<head> 
<meta http - equiv= "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 应 用 text- decoration 属性 </title> 
< style type = text/css> 
h2{font - family: 黑 体 ;font - size:14pt; font- weight:bold} 
.pl{font— size:18px;text - decoration:underline} 
.Pp2{font— size:18px;text - decoration:l1ine -through} 
.di{font— size:18px;text ~ align:right} 
.fi{font— size:12pt;text ~ indent:25 % } 
.f2{font — size:12pt;text ~ indent:30px} 
.bl{font- size:15px;line ~ height:18px} 
.b2{font- size:15px;line ~ height:150%} 
.b3{font — size:15px;line— height:2} 
</style> 
</head> 
<body> 
< h2 > 文字 修饰 </h2 > 
<hr> 
<p class=pl> 下 夯 线 的 效果 </p> 
<p class = p2 > 删除 线 的 效果 </p> 





<h2 > 文本 排列 </h2 > 
<hr> 
<p class = dl > 这 段 文字 为 右 对 齐 排 列 方式 这 段 文字 为 右 对 齐 排列 方式 这 段 文字 为 右 对 齐 排列 方 
式 </p> 
<h2 > 段落 缩 进 </h2 > 
<hr> 
<p class = fl > 首 行 缩 进 为 25% ,这 段 文字 的 首 行 缩 进 为 25%</p> 
<p class = f2 > 首 行 缩 进 为 30 像素 , 这 段 文字 的 首 行 缩 进 为 30 像素 </p> 
<p class = f3 > 首 行 缩 进 为 30 点 ,这 段 文字 的 首 行 缩 进 为 30 点 </p> 
<h2 > 调整 行 高 </h2 > 
<hr> 
<p class = bl > 行 高 为 18 像素 </p> 
<p class = b2 > 行 高 为 字号 大 小 15 像素 的 150% ,即行 高 为 22.5 像素 </p> 
<p class = b3 > 行 高 为 字号 大 小 15 像素 的 2 倍 ,即行 高 为 15px 乘 2,30 像素 </p> 
</body> 
</html > 


本 例 综 合 以 上 各 文本 的 排版 属性 ,浏览 效果 如 图 8-7 所 示 。 
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这 段 文字 为 右 对 齐 排列 方式 这 段 文 字 为 右 对 齐 排列 方式 这 段 文 
字 为 右 对 齐 排列 方式 


段落 缩 进 





首 行 缩 进 为 25%， 这 段 文字 的 首 行 缩 进 为 25% 
首 行 缩 进 为 30 像 素 ， 这 段 文字 的 首 行 缩 进 为 30 像 素 
首 行 缩 进 为 3 点， 这 段 文字 的 首 行 缩 进 为 30 点 
调整 行 高 





行 高 为 18 像 素 
行 高 为 字号 大 小 15 像 素 的 150%， 即 行 高 为 22. 5 像素 


行 高 为 字号 大 小 15 像 素 的 2 倍 ， 即 行 高 为 15px 乘 2，30 像 素 
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7. 段落 内 容 裁剪 

通过 设置 行距 ,字符 间距 及 单词 间距 ,CSS 段落 文字 就 可 以 随心 所 欲 。HTML 中 有 个 
不 换行 的 标签 ,在 CSS 中 也 有 相应 的 设置 , 且 更 加 全 面 。 对 于 英文 和 中 文 段落 ,其 换行 设置 
有 word-break 属性 和 word-wrap 属性 ,基本 格式 分 别 为 : 





word - break:normal | break — all | keep— all 


其 中 ,normal 依照 亚洲 语言 和 非 亚 洲 语言 的 文本 规则 ,允许 在 字 内 换行 ; break-all 与 亚洲 
语言 的 normal 相同 ,也 允许 非 亚洲 语言 文本 行 的 任意 字 内 断 开 ,该 值 适合 包含 一 些 非 亚洲 
文本 的 亚洲 文本 ; keep-all 则 与 所 有 非 亚洲 语言 的 normal 相同 ,对 于 中 文 韩文. 日文 .不 允 
许字 内 断 开 ,适合 包含 少量 亚洲 文本 的 非 亚洲 文本 。 





word — wrap:normal | break — word 


其 中 ,normal 控制 连续 文本 换行 ; break-word 则 使 内 容 在 边界 内 换行 。 

如 果 要 强制 不 换行 可 以 使 用 CSS 提供 的 white-space 属性 ,该 属性 用 于 设置 如 何 处 理 
元 素 内 的 空白 ,共有 5 个 取 值 ,分 别 如 下 。 

(1) normal: 默认 值 ,空白 会 被 浏览 器 忽略 。 

(2) pre: 空白 会 被 浏览 器 保留 ,其 行为 方式 类 似 HTML 中 的 < pre > 标签 。 

(3) nowrap: 文本 不 会 换行 ,会 在 同一 行 上 继续 ,直到 遇 到 < br > 标签 为 止 。 

(4) pre-wrap: 保留 空白 符 序列 ,但 是 正常 地 进行 换行 。 

(5) pre-line: 合并 空白 符 序列 ,但 是 保留 换行 符 。 

在 DIV 十 CSS 的 布局 设计 中 ,对 于 容器 内 对 象 超出 范围 的 情况 ,CSS 为 容器 提供 了 
over-flow 属性 加 以 控制 ,该 属性 的 基本 格式 为 : 








over 一 flow: visible| hidden|scroll|auto 


其 中 ,visible 为 默认 值 , 表 示 内 容 不 会 被 修剪 ,溢出 的 内 容 会 呈现 在 元 素 内 容 区 之 外 ; 
hidden 表示 溢出 的 内 容 会 被 修剪 ,并 且 被 修剪 掉 的 内 容 是 不 可 见 的 ; 使 用 scroll 值 ,溢出 的 
内 容 也 会 被 修剪 ,但 是 浏览 器 会 显示 滚动 条 以 便 查看 被 修剪 掉 的 内 容 ; auto 表示 如 果 溢 出 
的 内 容 被 修剪 , 则 浏览 器 会 自动 显示 滚动 条 以 便 查看 被 修剪 的 内 容 。 

而 对 于 容器 内 的 单行 文本 如 果 超 出 范围 ,其 中 一 个 处 理 办 法 是 使 用 text-overflow 属性 
产生 省 略 号 ,而 不 是 简单 的 裁 切 。 但 只 有 IE 浏览 器 才 支 持 生成 的 省 略 号 ,并 且 必 须 保 证 单 
行文 本 强制 不 换行 。 

【 例 8-8】 段落 内 容 裁剪 的 应 用 。 


<! -- 程序 8- 8.html --> 

< html > 

<head> 

<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 段 落 内 容 裁 剪 </title> 

< style type = "text/css"> 


关 {margin:Opx; 
padding: 0px;} 
#all{width:500px; 
height :350px; 
margin:0px auto; 
padding: 5px; 
background: # eee;} 
h3, h5{text — align:center; 
margin:5px;} 
p{font — size:12px; 
text ~ indent:2em; 
width:350px; 
border:1px dashed #666; 
margin 一 top:20px;} 
#author{font— size:14px; 
text ~ align:right; 
margin:10px; 
border :Opx;} 
井 afword- break:keep— all;} 
井 bfwhite - space: nowrap; } 
提 c{word ~ wrap:break — word;} 
井 d{fwhite - space: nowrap; 





overflow:hidden; 
text ~ overflow:ellipsis;} 

</style> 
</head> 
<body> 
<div id= "all"> 

<h3 > 背影 </h3 > 

<p id = "author"> 作 者 : 朱自清 </p> 

<p id= "a"> 我 与 父亲 不 相 见 已 二 年 余 了 ,我 最 不 能 忘记 的 是 他 的 背影 。 那 年 冬天 ,祖母 死 了 , 父 
亲 的 差 使 也 交 印 了 , 正 是 祸 不 单行 的 日 子 , 我 从 北京 到 徐州 ,打算 跟着 父亲 奔 丧 回 家 。 到 徐州 见 着 父 
亲 , 看 见 满 院 狼藉 的 东西 ,又 想起 祖母 ,不 禁 答 租 地 流下 眼泪 。 父 亲 说 ," 事 已 如 此 ,不 必 难 过 ,好 在 天 
无 绝 人 之 路 !"</p> 

<p id= "b"> 我 与 父亲 不 相 见 已 二 年 余 了 ,我 最 不 能 忘记 的 是 他 的 背影 。 那 年 冬天 ,祖母 死 了 , 父 
亲 的 差 使 也 交 印 了 , 正 是 祸 不 单行 的 日 子 , 我 从 北京 到 徐州 ,打算 跟着 父亲 奔 丧 回 家 。 到 徐州 见 着 父 
亲 , 看见 满 院 狼藉 的 东西 ,又 想起 祖母 ,不 禁 繁 租 地 流下 眼泪 。 父 亲 说 , " 事 已 如 此 ,不 必 难 过 ,好 在 天 
无 绝 人 之 路 !"</p> 

<p id ="c"> Use this utility to compress your CSS to increase loading speed and save on 
bandwidth as well. You can choose from three levels of compression, depending on how legible you 
want the compressed CSS to be versus degree of compression. The "Normal" mode should work well in 
most cases, creating a good balance between the two.</p> 

<p id= "d"> 我 与 父亲 不 相 见 已 二 年 余 了 ,我 最 不 能 忘记 的 是 他 的 背影 。 那 年 冬天 ,祖母 死 了 , 父 
亲 的 差 使 也 交 印 了 , 正 是 祸 不 单行 的 日 子 , 我 从 北京 到 徐州 ,打算 跟着 父亲 奔 丧 回 家 。 到 徐州 见 着 父 
亲 , 看 见 满 院 狼 藉 的 东西 ,又 想起 祖母 ,不 禁 敏 租 地 流下 眼泪 。 父 亲 说 ， " 事 已 如 此 ,不 必 难 过 ,好 在 天 
无 绝 人 之 路 ! "</p> 
</div> 
</body> 
</html > 
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本 例 第 一 个 段落 采用 的 word-break 属性 ,并 取 值 为 keep-all, 这 种 换行 方式 以 逗号 分 
隔 , 而 第 二 个 段落 采用 的 是 white-space 属性 ,并 取 值 为 nowrap, 即 强制 不 换行 ,导致 文本 超 
出 了 容器 的 范围 ,第 3 个 段落 采用 的 是 word-warp 属性 , 取 值 为 break-word ,换行 时 保持 完 
整 的 英文 单词 ,最 后 一 个 段落 即 产 生 省 略 号 ,其 前 提 为 强制 不 换行 ,并 使 用 容器 的 over-flow 
属性 , 取 值 为 hidden( 即 裁 切 了 超出 的 部 分 ), 有 了 这 两 个 前 提 才 能 使 用 text-overflow 属性 。 
本 例 的 浏览 效果 如 图 8-8 所 示 。 





























段落 内 容 裁 劳 - Windows Internet Explorer 
文件 EF) 编辑 于) 查看 WW 收藏 夹 丰 ) 工具 CI) 帮助 0D 
GO | 居 ;ts'\ 程 序 9-9 hl 圈 [s3 [x| | 贸 二 we se= 
| 合 - 巴 赎 -RD 


背影 
作者 : 朱自清 
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图 8-8 段落 内 容 裁剪 示例 


8. 转换 英文 大 小 写 
text-transform 属性 主要 用 来 控制 英文 单词 的 大 小 写 转换 ,该 属性 可 以 很 灵活 地 实现 对 
单词 的 部 分 或 全 部 大 小 写 的 控制 ,其 基本 格式 为 : 





text — transform: uppercase|lowercase|capitalize|none 


其 中 ,uppercase 表示 将 所 有 的 单词 字母 都 大 写 ; lowercase 表示 将 所 有 的 单词 字母 都 小 写 ; 
capitalize 表示 将 每 个 单词 的 首 字母 大 写 ; none 则 为 默认 显示 。 使 用 时 可 以 选用 text- 
transform 属性 中 的 任何 一 个 属性 值 来 转换 英文 单词 的 大 小 写 。 

【 例 8-9】 英文 大 小 写 转 换 。 





<! -- 程序 8-9.html --> 

<html> 

<head> 

< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 


<title> 应 用 text- transform 属性 </title> 


< style type = text/css> 


h2{font 一 family: 黑 体 ;font - size:18pt} 
.pl{font— size:15px;text — transform: uppercase} 


.p2{font — size:15px;text — transform: lowercase} 


.p3{font — size:15px;text — transform:capitalize} 


.pA{font— size:15pxitext 一 transform:none} 


</style> 
</head> 
<body> 

<center> 


<h2 > 转换 英文 大 小 写 </h2 > 


</center> 
<hr> 
<pclass=pl>Welcomet 
<p class= p2>Welcomet 
<pclass=p3>Welcomet 
<pclass=p4>Welcomet 
</body> 
</html > 


0 china …… 所 有 单词 的 字母 都 大 写 </p> 
所 有 单词 的 字母 都 小 写 </p> 


o china 





o china 
o china 


本 例 显 示 了 各 种 英文 大 小 写 转换 后 的 效果 ,如 图 8-9 所 示 。 


丰 应 用 text-transfora 尾 性 - Windo..- 玫 | 操 | 必 | 
文件 四 ”编辑 下 查看 WD 收 总 到 以) 工具 CT) 和 有 > 
”和 ;=e 和 Fe-9 hnl 国 [+x] 


窑 收 天。 | 匡 有 tewsior 性 | | 区 

















转换 英文 大 小 写 


YELCOME TO CHINA 所 有 单词 的 字母 都 大 写 
Yelcone to china …… 所 有 单词 的 字母 都 小 写 
Welcome To China * 个 单词 的 首 字母 大 写 


Welcone to china * 





9. CSS3 的 多 列 布局 





是 我 的 电脑 


图 8-9 textrtransform 的 应 用 示例 








CSS3 现在 已 经 可 以 做 简单 的 布局 处 理 了 ,这 个 CSS3 新 特性 又 一 次 地 减少 了 


JavaScript 代码 量 ,参考 如 下 


.multi_column_style{ 
— webkit — column — count: 
一 webk 让 一 column — rule: 1 


代码 : 


3; 
px solid 井 bbb; 


一 webkit ~ column — gap: 2em; 


} 


CSS 网 页 元 芷 谈 计 


击 吕 泪 


Web 前 再 设计 与 开发 一 一 万 TML5TCSS3 十 JavaScript 微 课 版 





<div class= "multi_column_style"> 


其 中 ,column-count 表示 布局 几 列 ; column-rule 表示 列 与 列 之 间 的 间隔 条 样式 ,column- 
gap 表示 列 与 列 之 间 的 间隔 。 


8.2 颜色 与 背景 


网 页 中 的 每 个 元 素 都 有 前 景色 和 背景 色 , 也 有 很 多 的 网 页 或 文字 的 背景 由 图 片 组 成 。 
HTML 设置 背景 的 样式 非常 单调 ,在 Web 标准 的 页 面 中 ,背景 的 CSS 样式 非常 强大 ,广泛 
地 应 用 到 页 面 的 美化 应 用 中 。 


8.2.1 设置 字体 颜色 


在 HTML 中 设置 字体 颜色 使 用 的 是 < font > 标记 的 color 属性 , 而 在 CSS 中 仅 使 用 
color 属性 设置 字体 的 颜色 ,但 一 定 要 明确 color 属性 不 是 只 用 来 设置 字体 颜色 的 ,网 页 中 每 
个 元 素 的 颜色 都 可 以 用 color 属性 来 设置 , 且 用 color 属性 设置 的 颜色 一 般 都 为 标记 内 容 的 
前 景色 ,其 基本 语法 为 : 


color: 关 键 字 |RGB 值 


其 中 关键 字 就 是 用 颜色 的 英文 名 称 来 设置 颜色 ,如 “red” 代 表 红 色 ,“black” 代 表 黑 色 等 ; 
RGB 则 可 以 用 十 六 进 制 的 RGB 值 或 RGB 函数 来 表示 。 例 如 : 

(1) #00FF00; 十 六 进 制 的 RGB 值 ,这 是 最 常用 的 一 种 RGB 值 表示 方式 。 

(2) #0F0; 十 六 进 制 RGB 值 的 缩写 ,在 十 六 进 制 的 RGB 值 中 ,只 要 有 同样 的 数字 重 
复出 现 , 就 可 以 省 略 其 中 一 个 不 写 。 

(3) RGB(255,0,0): RGB 的 函数 值 ,常用 在 一 些 动态 颜色 效果 的 网 页 中 ,RGB 函数 的 
取 值 范围 为 0 一 255。 

(4) RGB(0,100%,0),RGB 的 函数 值 , 取 值 范 围 为 0~100%。 

RGB 函数 取 值 如 果 超出 了 指定 的 范围 ,浏览 器 就 会 自动 读 取 最 接近 的 数值 来 使 用 , 若 
设置 了 101%, 则 浏览 器 会 自动 读 取 “100%”; 车 设置 了 “一 2”, 则 浏览 器 会 自动 读 取 *0”。 
例如 : 





.hffont - family: 黑 体 ;font - size:20pt;color: 提 FF0000} 
.pl{font- family: 宋 体 ;font - size:16px;color:blue} 


其 中 第 一 行 表示 设置 了 20 点 的 黑体 字 ,颜色 为 红色 ; 第 二 行 表示 设置 了 16 像素 的 宋体 字 ， 
颜色 为 蓝 色 。 


8.2.2 设置 背景 凑 色 
CSS 中 使 用 background-color 属性 来 设置 背景 ,相对 于 HTML 中 的 背景 色 设置 ,CSS 


背景 色 有 更 为 灵活 的 设置 方法 ,不 仅 可 以 设置 网 页 的 背景 颜色 ,还 可 以 设置 文字 的 背景 颜 


色 ,其 基本 格式 为 ， 


background- color: 关键 字 |RGB 值 |transparent 


其 中 关键 字 与 RGB 值 的 取 值 与 8. 2. 1 节 的 color 取 值 相同 ; transparent 表示 透明 值 , 这 也 





是 background-color 属性 的 初始 值 。 
【 例 8-10】 背景 色 的 设置 。 


<! -- 程序 8-10.html --> 
< htm]l > 
<head> 


<meta http - equiv = "Content ~ Type" content = "text/htm1; charset = gb2312" /> 


<title> 背 景色 设置 </title> 
< style type = "text/css"> 
< {margin:Opx; 
padding: 0px;} 
all{width:400px; 
height :200px; 
margin:10px auto; 
font— size:16px; 
color:#fff; 
background color: 间 999999;} 
提 a, 提 b, 提 c, 提 d, 提 efwidth:80%; 
margin:15px auto;} 
井 afbackground -color: 提 9900CC;} 
井 b{fbackground - color:red;} 
提 c{background - color:rgb(80% ,0,0);} 
提 d{background - color:rgb(200,0,0);} 
##e{background - color:transparent;} 
</style> 
</head> 
<body> 
<div id= "all"> 
<div id= "a"> 常 规 十 六 进 制 颜色 值 表示 方法 </div> 
<div id= "b"> 颜 色 名 称 值 表示 方法 </div> 
<div id= "c"> RGB 值 表示 方法 (百分比 )</div> 
<div id= "d"> RGB 值 表示 方法 (十 进 制 )</div> 
<div id= "er> 透 明 色 表 示 方 法 </div> 
</div> 
</body> 
</html > 








本 例 的 浏览 效果 如 图 8-10 所 示 。 本 例 中 多 种 颜色 值 的 表示 方法 不 仅 可 以 用 于 背景 色 ， 











还 可 以 用 于 其 他 XHTML 元 素 的 CSS 属性 颜色 值 。 
CSS3 已 经 提供 透明 度 的 支持 了 。 例 如 : 





CSS 网 页 元 责 讼 计 


地 oo 四 


Web 前 端 届 计 与 开发 一 一 TML5 十 CSS3 十 JavaScript 微 课 版 





color: rgba(255, 0, 0, 0.75); 
background: rgba(0, 0, 255, 0.75); 





该 代码 “rgba” 属 性 中 的 *a” 代 表 透 明度 ,也 就 是 这 里 的 "0.75”, 同 时 CSS3 还 支持 HSL 
颜色 声明 方式 及 其 透明 度 。 例 如 : 


color: hsla( 112, 72%, 33%, 0.68); 


背景 色 设置 - Windows Internet Explorer 


文件 人 ) 编辑 中) 查看 WW) 收 豪 夹 &) 工具 D 帮助 人 
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透明 色 表 示 方 法 





图 8-10 background-color 使 用 示例 


8.2.3 设置 背景 图 片 
背景 图 片 的 设置 属性 为 background-image, 其 属性 值 即 为 图 片 所 在 的 路 径 , 基 本 格式 为 : 


background 一 image:url(" 图 片 路 径 "); 








该 属性 设置 背景 图 片 的 效果 与 HTML 中 设置 背景 图 片 的 效果 一 样 , 默 认为 平 铺 的 背 
景 图 片 ,配合 CSS 其 他 背景 属性 ,可 以 使 背景 图 片 得 到 更 精确 的 控制 。 控 制 背景 平 铺 的 属 
性 为 background-repeat, 其 值 有 以 下 4 个 。 

(1) repeat: 默认 值 ,背景 图 片 在 水 平和 垂直 方向 平 铺 。 

(2) repeat-x: 水 平方 向 平 铺 。 

(3) repeat-y: 垂直 方向 平 铺 。 

(4) no-repeat: 不 平 铺 ,只 显示 一 张 背 景 图 片 。 

将 background-image 属性 和 background-repeat 属性 结合 使 用 ,就 可 以 方便 地 控制 背 
景 图 片 的 平 铺 方式 。 

【 例 8-11】 背景 图 片 的 设置 。 









































<! -- 程序 8-11.html -一 > 
<html> 


< head> 
<meta http - equiv = "Content - TYpe"”content = "text/html; charset = gb2312" /> 
<title> 背 景 图 片 平 铺 </title> 
< style type = "text/css"> 
x {margin:0pX7 
padding:0px;} 
#all{width:400px; 
height:510px; 
margin:0px auto; 
font — weight :bold; 
background - color: # eee;} 
提 a, 提 b, 提 c, 井 d, 提 cc, 提 dd{width:80%; 
height:50px; 
border:1px dotted #f00; 
margin:15px auto;} 
#a{background - image:url("img/bg.gif");} 
#b{background - image:url("img/bg. gif"); 
background— repeat :no— repeat;} 
提 c, 提 cc{background - repeat :repeat 一 xi} 
#c{background - image:url("img/bg. gif");} 
cc{background - image:url("img/bgx. gif");} 
提 d, 提 dd{height:100px; 
background— repeat :repeat — y;} 
#d{background — image:url("img/bg.gif");} 
#dd{background - image:url("img/bgy. gif");} 
</style> 
</head> 
<body> 
<div id= "all"> 
<div id= "a"> 默 认 的 背景 图 片 平 铺 </div> 
<div id= "b"> 不 平 铺 背 景 图 片 </div> 
<div id= "c"> 水 平平 铺 背 景 图 片 </div> 
<div id= "cc"> 水 平平 铺 常 用 实例 </div> 
<div id= "d"> 垂 直 平 铺 背 景 图 片 </div> 
<div id= "dd"> 垂 直 平 铺 常用 实例 </div> 
</div> 
</body> 
</html > 





本 例 不 但 使 用 了 背景 平 铺 的 4 个 值 ,还 分 别 增加 了 水 平平 铺 和 垂直 平 铺 的 常用 实例 , 通 
过 小 图 片 的 平 铺 可 以 达到 丰富 的 视觉 效果 ,其 浏览 效果 如 图 8-11 所 示 。 


8.2.4 设置 疹 景 图 片 位 置 


在 网 页 中 插入 背景 图 时 ,如 果 背 景 图 片 不 平 铺 , 该 图 片 会 默认 显示 在 网 页 的 左上 角 ， 
CSS 提供 了 用 于 定位 背景 图 片 的 background-position ,其 定位 功能 很 强大 ,确定 图 片 位 置 能 
精确 到 像素 级 别 。 

定位 背景 的 方法 有 两 种 : 一 种 是 指定 位 置 名 称 ; 另 一 种 是 通过 像素 或 百分比 指定 背景 
具体 的 位 置 , 基 本 格式 为 : 




















background- position: 关键 字 | 百 分 比 | 长 度 
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图 8-11 背景 图 片 的 应 用 示例 


关键 字 在 水 平方 向 的 主要 有 left center 和 right, 表 示 居 左 、 居 中 和 居 右 ; 关键 字 在 垂 
直方 向 的 主要 有 top ,center 和 bottom ,表示 顶端 .居中 和 底 端 。 其 中 水 平方 向 和 垂直 方向 
的 关键 字 可 相互 搭配 使 用 。 

利用 百分比 和 长 度 设置 图 片 位 置 时 ,都 要 指定 两 个 值 ,并 且 这 两 个 值 要 用 空格 隔 开 。 昔 
中 一 个 值 代表 水 平 位 置 , 另 一 个 值 代表 垂直 位 置 。 水 平 位 置 的 参考 点 是 网 页 页 面 的 左边 , 垂 
直 位 置 的 参考 点 是 网 页 页 面 的 上 边 。 例 如 , background-position: 40% 60%; 表示 背景 图 
片 的 水 平 位 置 为 左边 起 的 40%% ,垂直 位 置 为 上 边 起 的 60%。 又 如 ,background-position; 
100px 200px; 表示 背景 图 片 的 水 平 位 置 为 左边 起 的 100 像素 ,垂直 位 置 为 上 边 起 的 200 像素 。 

【 例 8-12】 定位 背景 图 片 。 
































<! -- 程序 8- 12.html --> 
< html > 
< head> 
< meta http - equiv = "Content - TYpe"” content = "text/html; charset = gb2312" /> 
<title> 背 景 定 位 </title> 

< style type = "text/css"> 

x {margin:0px; 

padding:0px;} 


##all{width:400px; 
height :300px; 
margin:0px auto; 
font — weight :bold; 
background - color: # eee;} 
提 a, 提 b, 提 cfwidth:80%; 
height :80px; 
border: 1px dotted #333; 
margin:15px auto; 
background — image:url("img/bgl. gif"); S 
background— repeat :no — repeat;} 视频 讲解 
井 afbackground - position:right bottom; } 
井 b{background - position:50px 20px;} 
井 c{background - position:10% 90%;} 
</style> 
</head> 
<body> 
<div id= "all"> 
<div id= "a"> 江 南 忆 , 最 忆 是 杭州 。 山 寺 月 中 寻 桂 子 , 郡 亭 术 上 看 潮 头 。 何 日 更 重 游 ?</div> 
<div id= "b"> 江 南 忆 , 其 次 忆 吴 宫 。 吴 酒 一 杯 春 竹 叶 , 吴 娃 双 舞 醉 英 其 。 早 晚 复 相 着 ?</div > 
<div id= "c"> 江 南 好 ,风景 旧 曾 谱 。 日 出 江 花红 胜 火 , 春 来 江水 绿 如 蓝 。 能 不 忆 江 南 ?</div> 
</div> 
</body> 
</html > 





本 例 通 过 3 种 不 同 的 方式 显示 背景 图 片 的 不 同位 置 ,其 浏览 效果 如 图 8-12 所 示 。 
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8.2.5 设置 背景 附件 
背景 附件 属性 (background-attachment) 是 指 用 来 设置 背景 图 片 是 否 会 随 着 滚动 条 的 
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移动 而 一 起 移动 。 基 本 格式 为 : 
background ~ attachment:scroll|fixed 
其 中 scroll 表示 背景 图 片 是 随 着 滚动 条 的 移动 而 移动 ,是 浏览 器 的 默认 值 ; fixed 表示 背景 


列 片 国定 在 页 面 上 不 动 , 不 随 着 滚动 条 的 移动 而 移动 。 
【 例 8-13】 背景 图 片 的 固定 。 



































<! -- 程序 8- 13.html --> 
< html > 
<head> 
<meta http - equiv = "Content - Type" content = "text/htm1; charset = gb2312" /> 
<title> 应 用 背景 附件 属性 </title> 
< style type = text/css> 
body{background — image:url("img/bg2.gif"); 
background — attachment: fixed; 
background — repeat :no - repeat} 
h2{font- family: 黑 体 ;font - size:20pt;color:red} 
.pl{font— size:18px;color: #000000;text -align:center} 
</style> 
</head> 
<body> 
<center> 
< hz2> 忆 江南 </h2> 
</center > 
<hr> 
<p class = pl > 江南 好 , 风景 旧 曾 详 。 日 出 江 花 红 胜 火 ,春来 江水 绿 如 蓝 。 能 不 忆 江 南 ?</p> 
<p class = pl > 江南 忆 , 最 忆 是 杭州 。 山 寺 月 中 寻 桂 子 , 郡 亭 枕 上 看 潮 头 。 何 日 更 重 游 ?</p> 
<p class = pl > 江南 忆 , 其 次 忆 吴 宫 。 吴 酒 一 杯 春 竹 叶 , 吴 娃 双 舞 醇 芮 其。 早晚 复 相逢 ?</p> 
</body> 
</html > 




















本 例 将 背景 图 片 的 background-attachment 属性 设置 为 随 着 滚动 条 的 移动 而 移动 ,其 浏 
览 效果 如 图 8-13 所 示 。 移 动 滚动 条 后 的 效果 如 图 8-14 所 示 。 
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图 8-13 应 用 背景 附件 后 的 效果 到 8-14 移动 滚动 条 后 的 效果 








8.2.6 背景 属性 整体 设置 


前 面 学 习 的 CSS 背景 设置 似乎 过 于 烦琐 ,编写 控制 背景 的 CSS 代码 往往 使 用 多 个 属性 
的 组 合 ,为 此 ,CSS 提供 了 背景 属性 的 整体 编写 方法 ,即使 用 background 属性 ,其 值 由 多 个 
背景 控制 的 属性 值 组 合 而 成 ,基本 格式 为 : 





background: 背景 色 背景 图 片 路 径 背景 平 铺 方式 背景 是 否 固定 背景 定位 ; 


可 见 ,background 属性 综合 了 多 个 背景 属性 ,只 需 根据 顺序 填 入 相应 的 属性 值 即 可 。 
如 下 面 的 代码 段 : 


间 c{background: 间 cf0000 url("img/bg. gif") no— repeat right top;} 


如 果 某 些 属性 无 须 设 置 ,直接 使 用 默认 值 (如 背景 是 否 固定 ,默认 为 不 国定 ), 则 可 省 略 
该 属性 值 的 缩写 ,浏览 器 在 解析 时 会 自动 使 用 默认 值 设置 。 这 种 背景 整体 设置 的 方法 非常 
灵活 ,甚至 可 以 直接 代替 background-image 和 background-color 等 属性 ,并 拥有 更 好 的 扩 
展 性 ,所 以 在 实际 的 网 页 设计 制作 中 ,background 属性 是 首选 的 CSS 背景 属性 ,现在 各 大 网 
站 中 已 被 广泛 使 用 。 

CSS3 多 出 了 几 种 关于 背景 (background) 的 属性 ,下 面 简单 介绍 一 下 。 

(1) Background Clip。 该 属性 确定 背景 画 区 ,有 以 下 几 种 可 能 的 属性 : 

。 background-clip: borderbox; 背 景 从 border 开始 显示 。 

。 background-clip: padding-box; 背 景 从 padding 开始 显示 。 

。 background-clip: content-box; 背 景 显 content 区 域 开始 显 示 。 

。 background-clip: no-clip; 默 认 属 性 ,等 同 于 border-box。 

通常 情况 下 ,背景 都 是 覆盖 整个 元 素 的 ,现在 CSS3 可 以 设置 是 否 一 定 要 这 样 做 。 这 里 
可 以 设 定 背景 颜色 或 图 片 的 覆盖 范围 。 

(2) Background Origin。 用 于 确定 背景 的 位 置 , 它 通常 与 background-position 结合 使 
用 ,可 以 从 border、 padding、content 来 计算 background-position (就 像 background-clip 
一 样 )。 

。 background-origin: border-box; 从 border. 开始 计算 background-position。 














。 background-origin: padding-box; 从 padding. 开始 计算 background-position。 

。 background-origin: content-box; 从 content. 开始 计算 background-position。 

(3) Background Size。 常 用 来 调整 背景 图 片 的 大 小 ,注意 不 要 与 clip 混淆, 它 主要 用 于 
设 定 图 片 本 身 。 有 以 下 几 种 可 能 的 属性 : 

。 background-size: contain; 缩小 图 片 以 适合 元 素 ( 维 持 像素 长 宽 比 ) 。 

。 background-size: cover; 扩展 元 素 以 填补 元 素 ( 维 持 像素 长 宽 比 )。 

。 background-size: 100px 100px; 缩小 图 片 至 指定 的 大 小 。 

。 background-size: 50% 100%; 缩小 图 片 至 指定 的 大 小 ,百分比 是 相对 包含 元 素 的 

炬 条。 
(4) Background Break 属性 。 在 CSS3 中 ,元 素 可 以 被 分 成 几 个 独立 的 盒子 (如 使 内 联 
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元 素 span 跨越 多 行 ) ,background-break 属性 用 来 控制 背景 怎样 在 这 些 不 同 的 盒子 中 显示 。 
。 background-break: continuous; 默认 值 。 忽 略 盒子 之 间 的 距离 (也 就 是 像 元 素 没 有 
分 成 多 个 盒子 ,依然 是 一 个 整体 一 样 ) 
。 background-break: bounding-box; 把 盒子 之 间 的 距离 计算 在 内 。 
。 background-break: each-box; 为 每 个 盒子 单独 重 绘 背景 。 
这 种 属性 可 以 设 定 复杂 元 素 的 背景 属性 。 最 为 重要 的 一 点 ,CSS3 中 支持 多 背景 图 片 ， 
参考 如 下 代码 : 








div{ 
background: url(src/zippy— plus. png) 10px center no - repeat, 


url(src/gray_lines_bg. png) 10px center repeat — x; 
} 


8.3 图片 样 式 控制 


在 HTML 中 ,通过 img 元 素 和 scr 等 属性 可 以 将 外 部 的 图 片 插入 到 网 页 文档 中 ,在 网 
页 设计 中 ,图 片 的 排版 也 很 重要 ,本 节 主 要 学 习 图 片 的 定位 ,图 文 混 排 和 图 片 的 裁剪 。 


8.3.1 图 片 定 位 
图 片 即 img 元 素 , 作 为 XHTML 一 个 独立 的 对 象 ,需要 占据 一 定 的 空间 ,这 与 8. 2 节 所 
学 习 的 背景 图 片 有 着 很 大 的 区 别 。img 元 素 在 页 面 中 的 定位 依然 要 用 盒 模型 定位 来 设计 ， 


特别 是 当 图 片 成 为 超 链接 时 ,CSS 伪 类 的 各 种 设计 也 可 以 应 用 到 img 元 素 。 
【 例 8-14】 图 片 的 定位 。 





<! -- 程序 8- 14.html --> 
<htm1l xmlns = "http://www. w3. org/1999/xhtml"> 
<head> 
<meta http - equiv = "Content - TYpe"”content = "text/html; charset = gb2312" /> 
<title> 图 片 定位 </title> 
< style type = "text/css"> 
x* {margin:Opx; 
padding:0px;} 
#all{width:500px; 
height:360px; 
margin:0px auto; 
padding:10px; 
background: # eee;} 
h3{width:200px; 
height :60px; 
background: 间 ccc;} 
提 view{float:left;} 
提 view2{position:absolute; 
top:380px; 
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left:25px;} 
</style> 
</head> 
<body> 
<div id= "all"> 
< img src = "img/tu01.JPG" /> 可 以 和 图 片 元 素 并 排 在 同一 行 。 
<h3 > 风景 如 画 </h3 > 无 法 和 hl~h6 元 素 并 排 在 同一 行 ,所 以 , img 元 素 仍然 是 内 联 元 素 ,而 bl 一 
h6 元 素 是 块 状元 素 。< hr /> 
< img src= "img/tu01.JPG" id= "view" /><h3 > 风景 如 画 </h3 > 可见 , 只 需 将 img 元 素 设置 浮动 
属性 , 块 状元 素 就 会 " 流 " 上 来 。< hr /> 
< img src= "img/tu01.JPG" id = "view2" /> 将 img 元 素 绝对 定位 也 可 以 随意 摆 放 图 片 。 
</div> 
</body> 
</html > 





本 例 充分 展示 了 图 片 在 网 页 中 的 定位 ,用 法 已 在 程序 中 用 文字 说 明 , 其 浏览 效果 如 
8-15 所 示 。 
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8-15 图 片 的 定位 示例 


.3.2 图 文 混 排 








由 于 段落 的 p 元 素 是 块 状元 素 ,利用 img 元 素 的 浮动 属性 同样 可 以 很 好 地 完成 复杂 的 | 第 


文 排版 。 
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【 例 8-15】 图 文 混合 排版 的 应 用 。 


< == 程序 8=- 15. htal --> 
<html> 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 图 文 混合 排版 </title> 
< style type = "text/css"> 
* {margin:Opx; 
padding:0px;} 
提 all{width:600px; 
height :600px; 
margin: Opx auto; 
padding:10px; 
background: 井 eee;} 
h2{text ~ align:center;} 
提 author{ text — align:right;} 
p{font ~ size:12px; 
text — indent:2em;} 
井 aftext -align:center;} 
#a h5{margin:5px;} 
提 b{width:150px; 
float:left;} 
# imgl{float: left; 
margin:12px;} 
</style> 
</head> 
<body> 
<div id= "all"> 
<h2 > 白杨 礼赞 </h2 > 
<p id = "author"> 作 者 : 茅盾 </p> 
<p> 白 杨 树 实在 不 是 平凡 的 ,我 赞美 白杨 树 !<br /> 当 汽车 在 望 不 到 边际 的 高 原 上 奔驰 , 扑 入 你 
的 视野 的 ,是 黄 绿 错 综 的 一 条 大 毯子 ; 黄 的 , 那 是 土 , 未 开垦 的 处 女 土 ,</p> 
<div id= "a">< img src = "img/tu02. JPG" width = "150” height = "122" />< h5 > 秋天 美景 图 
</h5 ></div> 
<p id= "b"> 几 百 万 年 前 由 伟大 的 自然 力 所 堆 积 成 功 的 黄土 高 原 的 外 壳 ; 绿 的 呢 , 是 人 类 劳力 战 
胜 自然 的 成 果 , 是 麦田 ,和 风 吹 送 , 翻 起 了 一 轮 一 轮 的 绿 波 一 一 这 时 你 会 真心 佩服 萌 人 所 造 的 两 个 
字 " 麦 浪 ", 若 不 是 妙手 偶 得 , 便 确 是 经 过 锤炼 的 语言 的 精华 。</p> 
< img src = "img/tu02.JPG" width = "150" height = "122" id= "imgl" /> 
<p> 黄 与 绿 主 衬 着 ,无 边 无 起 ,坦荡 如 研 , 这 时 如 果 不 是 宛若 并 肩 的 远 山 的 连 峰 提醒 了 你 (这 些 山 
峰 凭 你 的 肉眼 来 判断 ,就 知道 是 在 你 脚底 下 的 ), 你 会 忘记 了 汽车 是 在 高 原 上 行驶 ,这 时 你 涌 起 来 的 
感想 也 许 是 "雄壮 ", 也 许 是 "伟大 ", 诸 如 此 类 的 形容 词 ,然而 同时 你 的 眼睛 也 许 觉得 有 点 倦 息 , 你 对 
当前 的 "雄壮 "或 "伟大 " 闭 了 眼 , ,而 另 一 种 味 儿 在 你 心头 潜 滋 暗 长 了 一 一 "单调"! 可 不 是 ,单调 ,有 一 
点 儿 黑 ?<br /> 
然而 刹那 间 , 要 是 你 猛 抬 眼 看 见 了 前 面 远 远 地 有 一 排 ， 不 ,或 者 甚至 只 是 三 五 株 , 一 二 株 ,傲然 
地 管 立 , 像 哨 兵 似 的 树木 的 话 , 那 你 的 恢 恢 欲 睡 的 情绪 又 将 如 何 ? 我 那 时 是 惊奇 地 叫 了 一 声 的 !< hr /> 那 
就 是 白杨 树 ,西北 极 普通 的 一 种 树 , 然而 实在 不 是 平凡 的 一 种 树 ! </p> 
</div> 
</body> 
</html> 








本 例 利用 div 元 素 包含 img 元 素 和 h5 元 素 , 实 现 了 图 片 居中 并 文字 说 明 的 效果 ,而 利 
用 Pp 元 素 的 向 左 浮动 和 imsg 元 素 的 向 左 浮动 ,实现 了 图 片 混 排 于 段落 内 部 的 效果 ,图 片 在 网 
页 中 的 显示 尺寸 可 通过 width 属性 和 height 属性 控制 ,一 般 须 保持 宽 高 比例 图 片 才 不 会 变 
形 , 但 用 width 属性 和 height 属性 调整 图 片 尺 寸 后 ,图 片 失 真 比较 严重 ,使 其 美观 程度 大 打 
折扣 。 本 例 的 浏览 效果 如 图 8-16 所 示 。 








图 文 混 合 排版 - Windows Internet Ezplorer 

文件 四 ”编辑 如 ”查看 WW 收 阅 严 内 工具 四 帮助 四 
WE | 
LSXSIGEECOEERCIDIEIEEEEEE 














帘 收藏 天。 | 忽 图 文 混合 排版 [ 从 - 局 出 ” 页 面 E) ”安全 E) ”工具 @) ~ 


作者 : 茅盾 
白杨 树 实在 不 是 平凡 的 ， 我 赞美 白杨 树 ? 
站 站 入 你 的 视野 的 ， 是 黄 妇 鲁 综 的 一 条 大 称 子 ; 黄 的 ， 那 是 土 ， 未 开明 的 处 女 
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秋天 美景 图 
几 百 万 年 前 由 伟大 的 自 
所 高 原 





本 “单调 "4 可 不 是 ， 单 调 ， 有 一 点 儿 
cp 人 
， 或 者 甚至 只 是 三 五 


一 排 ， 
地 站 六 ， 旬 史 兵 人 明科 本 的 活 ， 屠 伯 的 人 全 多 汪 结 又 可 侣 二 时 是 有 二 了 一声 有 
那 就 是 白 祈 树 ， 西 北极 和 通 的 一 种 村 ,类 而 实在 不 是 平凡 的 一 种 村? 








图 8-16 图 文 混合 排版 的 应 用 示例 


8.3.3 图 片 的 载 切 


为 了 可 以 在 网 页 中 用 较 小 的 容器 显示 较 大 的 图 片 ,CSS 提供 了 clip 属性 对 图 片 进行 裁 
切 ,效果 类 似 于 Photoshop 中 的 画布 大 小 的 调整 ,基本 格式 为 : 


clip: auto|rect( 上 偏 移 右 偏 移 下 偏 移 左 偏 移 ) 


其 中 ,auto 代表 不 裁 切 ; 假设 左上 角 坐 标 为 (0,0) ,rect 中 的 偏 移 参 数 就 代表 图 片 的 4 条 边 
相对 图 片 在 左上 角 的 偏 移 数值 ,其 中 任 一 数值 都 可 以 用 auto 替换 , 即 此 边 不 剪 切 。 

在 使 用 clip 属性 时 需要 注意 以 下 两 点 。 

(1) clip 属性 必须 与 定位 属性 position 一 起 使 用 才能 生效 。 

(2) clip 裁 切 的 计算 坐标 都 是 以 左上 角 即 (0,0) 点 开始 计算 的 ,这 点 与 padding 和 
margin 不 一 样 ,它们 两 个 的 右边 距 和 下 边 距 是 从 最 右边 和 最 下 边 开始 计算 的 。 
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【 例 8-16】 图 片 裁 切 的 应 用 。 











<! -- 程序 8-16.html -一 > 


<html > 

<head> 

<meta http - equiv = "Content ~ Type" content = "text/htm1; charset = gb2312" /> 
<title> 图 片 裁 切 </title> 





< style type = "text/css"> 
x {margin:0px; 
padding: 0px;} 
井 allfwidth:300px; 
height :200px; 
margin:0Opx ; 
padding: 10px; 
background: # eee;} 
img#a{clip:rect(0Opx 50px 50px Opx);} 
img# b{position:absolute; 
clip:rect(0px 100px 100px Opx);} 
img# c{position:absolute; 
right :10px; 
top:50px; 
clip:rect(100px 100px 150px Opx);} 
</style> 
</head> 
<body> 
<div id= "all"> 
< img src = "img/tu03.JPG" /> 
< img src = "img/tu03. jpg" id = "b" /> 
< img src = "img/tu03. jpg" id = "c" /> 
</div> 
</body> 
</html> 





视频 讲解 





本 例 分 别 用 3 种 情况 显示 图 片 的 裁 切 .浏览 效果 如 图 8-17 所 示 。 


/图 片 裁 切 - Windows Internet Explorer 
文件 @) ”编辑 下 ) 查看 W) 收 套 天 工具 I) 帮助 0) 


GO urea'ye-ts hal 国 |+|x| 起 


帘 收 蕊 交 “| 蕊 图 片 各 切 | 全 "加 

















图 8-17 图 片 裁 切 示例 











clip 





通过 例 8-16 可 以 看 到 ,clip 属性 需要 将 img 元 素 进行 绝对 定位 才能 生效 ,而 这 样 对 规 
范 的 排版 是 很 不 利 的 ,所 以 为 了 避免 绝对 定位 对 排版 带 来 的 麻烦 ,在 网 页 设计 中 很 少 使 用 

















性 定义 了 溢出 元 素 内 容 区 的 内 容 会 如 何 处 理 。 


【 例 8-17】 使 用 over-flow 属性 进行 图 片 裁 切 。 


<! -- 程序 8-17.html --> 
<html> 
<head> 
<meta http - equiv = "Content - Type”" content = "text/htm]l; 
<title> 使 用 over- flow 图 片 裁 切 </title> 
< style type = "text/css"> 
x {margin:Opx; 
padding:0px;} 
all{width:350px; 
height :250px; 
margin:0px auto; 
padding:10px; 
background: # eee;} 
提 a, 提 b, 提 c, 提 d{width:130px; 
height :100px; 
float:left; 
overflow:hidden; 
margin:10px; 
border:1px solid 井 000;} 
#3b img{margin - top: ~ 20px; 
margin 一 left: — 50px;} 
#c img{margin - top: — 50px; 
margin— left: — 100px;} 
#d img{margin - top:20px; 
margin — left:30px;} 
</style> 
</head> 
<body> 
<div id= "all"> 
<div id= "a">< img src = "img/tu03.JPG" /></div> 
<div id= "b">< img src = "img/tu03.JPG" /></div> 
<div id= "c">< img src= "img/tu03.JPG" /></div> 
<div id= "d">< img src= "img/tu03.JPG" /></div> 
</div> 
</body> 
</html > 





属性 ,而 是 使 用 另 一 种 裁 切 图 片 的 方法 ,即使 用 图 片 父 容器 的 overflow 属性 。 这 个 属 


charset = gb2312" /> 





图 片 在 容器 内 进行 任意 定位 可 通过 边 距 属性 margin 取 负 值 来 实现 ,本 例 通过 img 元 素 


的 边 距 负 值 使 其 在 父 容器 内 可 自由 定位 ,从 而 轻松 实现 








图 








8-18 所 示 。 





图 片 裁 切 的 效果 ,其 浏览 效果 如 
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太 使 用 over-f1ow 图 片 裁 切 - Windows Inte--- [- | 右 | 区 | 
文件 和 编辑 下) 查看 @) 收 豪 严 和) 工具 YI) 帮助 0 








OO -eerrim 国 [x| | 入 i 
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图 8-18 ”over-flow 的 应 用 示例 


8.4 上 机 练习 与 指导 


8.4.1 网 页 文档 排版 


文字 段落 作为 网 页 内 容 的 重要 组 成 部 分 ,其 版 式 设计 非常 关键 ,下 面 将 练习 使 用 CSS 
中 提供 的 大 量 的 文本 属性 控制 给 一 段 文 字 进 行 排版 ,效果 如 图 8-19 所 示 。 
鸟 的 天 堂 





作者 ， 巴 金 
> 们 在 陈 的 小 学 校 里 吃 了 晚饭 。 热 气 已 经 退 了 。 太 阳 落下 了 山坡 ， 只 留 下 一 段 灿烂 的 红 起 在 
天 边 ， 在 山头 ， 在 树 梢 。 “我 们 划船 去 9 ” 陈 提议 说 。 我 们 正 站 在 学 校门 前 池子 旁边 看 山 


= 好 ，” 别 的 朋友 高 兴 地 接口 说 。 

我 们 走 过 一 段 石子 路 ， 很 快 地 就 到 了 河 边 。 那 里 有 一 个 茅草 搭 的 水 阔 。 穿 过 水 阁 , 在 河 边 
两 棵 大 树 下 我 们 找到 了 几 只 小 船 。 
上 我 们 陆续 跳 在 一 只 船上 。 一 个 朋友 解 开 强 子 ， 拿 起 竹 年 一 拔 ， 船 强加 地 动 了 ,向 河 中间 流 


三 个 朋友 旭 荐 船 ， 我 和 叶 坐 在 船 中 望 四 周 的 景致 。 











图 8-19 文档 排版 效果 图 


要 求 和 HTML 一 样 ,仍然 用 p 元 素 容 纳 段落 文字 ,可 利用 text-indent 属性 控制 段落 的 
首 行 缩 进 ,参考 代码 为 : 


<! -- 上 机 练习 8 一 1. html -> 

< htm] xmlns = "http://www. w3. org/1999/xhtml"> 

<head> 

< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 段 落 样式 1</title> 

< style type = "text/css"> 


关 {margin:Opx; 
padding: 0px;} 
#all{width:500px; 
height :200px; 
margin:0px auto; 
padding: 5px; 
background: eee;} 
h3{text ~- align:center;} 

间 author{font— size:14px; 
text ~ align:right; 
margin:10px;} 

.Content{ font — size:12px; 

text — indent :2em;} 
p#a:first— letter{font - size:2em; 


float:left;} 
井 affont - size:12px;} 
</ style> 
</head> 
<body> 
<div id= "all"> 
<h3 > 鸟 的 天 堂 </h3 > 


<p id = "author"> 作 者 : 巴金 </p> 

<p id= "a"> 我 们 在 陈 的 小 学 校 里 吃 了 晚饭 。 热 气 已 经 退 了 。 太 阳 落 下 了 山坡 ,只 留 下 一 段 灿烂 的 
红 霞 在 天 边 , 在 山头 ,在 树 梢 。" 我 们 划船 去 心 陈 提议 说 。 我 们 正 站 在 学 校门 前 池子 旁边 看 山 景 。</p> 

<p class = "content">" 好 ," 别 的 朋友 高 兴 地 接口 说 。</p> 

<p class = "content"> 我 们 走 过 一 段 石子 路 ,很 快 地 就 到 了 河 边 。 那 里 有 一 个 茅草 搭 的 水 阁 。 
穿 过 水 阁 , 在 河 边 两 棵 大 树 下 我 们 找到 了 几 只 小 船 。</p> 

<p class = "content"> 我 们 陆续 跳 在 一 只 船上 。 一 个 朋友 解 开 绳子 , 拿 起 竹竿 一 拨 , 船 缓 绥 地 动 
了 ,向 河中 间 流 去 。</p> 

<p class = "content"> 三 个 朋友 划 着 船 ,我 和 叶 坐 在 船 中 望 四 周 的 景致 。</p> 
</div> 
</body> 
</html > 


8.4.2 背景 样式 综合 应 用 


本 节 综 合 了 前 面 学 习 的 背景 样式 ,利用 background 属性 的 强大 功能 与 列表 元 素 , 制 作 
一 个 导航 条 ,效果 样式 如 图 8-20 所 示 。 


图 8-20 导航 条 样式 效果 医 
































要 求 在 img 目录 下 放 入 3 个 图 片 文件 用 于 导航 选项 背景 ,分 别 对 应 超 链接 的 未 访问 状 
态 、 鼠 标 滑 过 状态 及 鼠标 单 击 状态 ,通过 超 链接 伪 类 的 应 用 ,使 3 张 背景 图 片 做 出 相应 的 切 
换 。 参 考 代 码 为 : 
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<a href =" 井 "> 联系 方式 </a> 
</1i> 
</u> 
</body> 
</html > 





该 代码 的 背景 图 片 采用 3 张 独立 的 图 片 文件 ,实际 上 有 了 CSS 强大 的 背景 定位 功能 
后 ,还 可 以 把 3 张 图 片 合并 为 一 张 ,能 过 CSS 代码 对 这 张 图 片 进行 定位 ,从 而 完成 不 同 背景 











的 切换 ,读者 可 以 自行 完成 。 
8.4.3 图 文 混 排 应 用 


本 节 练 习 应 用 CSS 中 的 背景 .文字 及 图 片 样式 属性 编写 ,其 图 文 混 排 效果 如 图 8-21 


所 示 。 





苏 幕 遮 〔 怀 旧 ) 





怕 云 天 ， 黄 叶 地 。 
秋色 连 波 ， 波 上 寒 烟 滁 。 


山 映 斜阳 天 接 水 
有 = 更 在 斜阳 外 。 


避 乡 瑰 ， 追 旅 思 。 





图 8-21 图 文 混 排 效果 图 


参考 代码 为 


<! -- 上 机 练习 8 一 3. htm1 一 一 > 
<html xmlns = "http://www. w3. org/1999/xhtml"> 
<head> 


<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 


<title> 范 仲 淹 </title> 
<style type = "text/css"> 
井 bl {background ~ image:url("img/beijing. jpg"); 
background - repeat :no ~ repeat; 
background - attachment : fixed; 
font 一 size:14pt; 
color:black} 
井 b2{margin:1pt;broder:5pt)} 
</style> 
</head> 
<body id =bl > 
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< center > 
<font size = 10 color =black> 
苏 幕 遮 (怀旧 ) 
</font> 
</center> 
<hr> 
< img id=b2 src="img/tul. jpg" align = left width= "200" height = "277" vspace = 0 hspace = 50> 
<Pre> 
碧 云 天 , 黄 叶 地 。 
秋色 连 波 , 波 上 寒 烟 职 。 
山 映 斜 阳 天 接 水 。 
芳 草 无 情 , 更 在 斜阳 外 。 
黯 乡 魂 , 追 旅 思 。 
夜 夜 除非 ,好 梦 留 人 睡 。 
明月 楼 高 休 独 倚 。 
酒 人 愁 肠 ,化 作 相 思 泪 。 
</pre> 
</body> 
</html > 
8.5 本 章 习 题 
一 、 选 择 题 
1. 设置 段落 缩 进 的 属性 为 ( )。 
A. word-spacing B. text-decoration 
C. text-align D. text-indent 
2. 调整 中 文 文字 的 字 间 距 , 可 使 用 ( ) 属 性 。 
A. word-spacing B. letter-spacing 
C. word-decoration D. letter-decoration 
3. 不 属于 text-align 语法 中 的 属性 值 有 ( 入 
A. left B. right C. blink D. center 
4. 在 CSS 中 ,要 设置 页 面 文字 的 背景 颜色 ,应 使 用 ( ) 属 性 。 
A. color B. bgcolor 
C. background-color D. font-color 
5. 要 实现 背景 图 片 在 水 平方 向 的 平 铺 , 应 该 设置 为 ( ) 
A. background-image:repeat B. background-image:repeat-x 
C. background-image:repeat-y D. background-image:no-repeat 
6. 在 CSS 里 ,设置 背景 图 片 位 置 的 属性 为 ( 六 
A. background-image B. background-repeat 
C. background-position D. background-attachment 
二 、 填空 题 





1. 利用 CSS 样式 给 文字 加 下 画 线 ,应 该 使 用 文字 修饰 属性 ,属性 值 


2. 行 高 line-height 属性 的 基本 语法 是 
3. 属性 用 于 文字 的 水 平 对 齐 。 
4. 在 CSS 中 ,如 果 要 设置 背景 随 着 滚动 条 的 移动 而 移动 ,应 该 使 用 背景 附件 属性 





background-attachment 的 属性 值 


用 





5. 在 HTML 中 ,设置 字体 颜色 使 用 的 是 < font > 标记 的 属性 ,在 CSS 中 , 仅 使 
属性 设置 字体 的 颜色 。 
6. CSS 提供 了 属性 对 图 片 进行 裁 切 。 
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第 9 章 JavaScript 基础 


网 页 作为 一 种 新 型 的 传播 媒体 ,用 户 不 仅 想 要 被 动 地 接收 信息 ,还 希望 进行 互动 ,由 
Netscape 公司 开发 的 JavaScript 是 一 种 基于 对 象 和 事件 驱动 并 具有 安全 性 能 的 脚本 语言 ， 
用 于 开发 交互 式 的 Web 页 面 ,主要 用 在 客户 端 ,由 浏览 器 解析 并 运行 ,JavaScript 语言 的 出 
现 弥 补 了 HTML 只 能 提供 静态 资源 的 缺陷 ,将 原来 的 静态 网 页 转变 为 动态 网 页 ,其 基本 结 
构 形 式 与 其 他 编程 语言 相似 ,需要 先 编译 后 执行 。 

本 章 主要 内 容 如 下 。 

。 JavaScript 语言 的 基本 概念 。 

。 JavaScript 核心 语法 。 

。 JavaScript 程序 控制 结构 。 

。 JavaScript 函数 。 




















9.1 JavaScript 语言 概述 


JavaScript 诞生 于 1995 年 , 它 是 由 Netscape 公司 研发 的 一 种 客户 端 脚 本 语言 ,必须 在 
解析 器 的 解析 下 才能 运行 。 通 常 JavaScript 的 解析 器 是 由 浏览 器 提供 的 ,同时 它 有 着 松散 
的 结构 和 简单 的 语法 两 大 特点 ,可 以 在 网 页 中 实现 动态 效果 。 


9.1.1 JavaScript 的 定义 


JavaScript 是 一 种 基于 对 象 和 事件 驱动 并 具有 安全 性 能 、 跨 平台 的 解释 型 脚本 语言 ,与 
前 面 学 习 的 HTML 和 XHTML 完全 不 同 ,HTML 和 XHTML 只 是 一 种 标记 语言 ,用 某 种 
结构 存储 数据 并 在 设备 上 显示 ,而 JavaScript 基于 对 象 和 事件 驱动 ,只 是 将 程序 代码 嵌 在 
HTML 网 页 文件 中 ,可 以 用 于 开发 交互 式 的 Web 页 面 ,主要 用 在 客户 端 ,由 浏览 器 解析 并 
运行 。 

JavaScript 采用 的 是 小 程序 段 的 编程 方式 ,与 HTML 和 XHTML 标识 结合 在 一 起 ,使 
用 户 对 网 页 的 操作 更 加 方便 ,其 主要 特点 有 以 下 几 个 方面 。 

1) 安全 性 

JavaScript 是 一 种 安全 性 很 高 的 语言 , 它 只 能 通过 浏览 器 实现 网 络 的 访问 和 动态 交互 ， 
有 效 地 防止 了 通过 访问 本 地 硬盘 或 将 数据 存 人 到 服务 器 ,从 而 对 网 络 文档 及 重要 数据 进行 
的 不 正当 操作 。 

2) 易 用 性 

JavaScript 是 一 种 脚本 编程 语言 ,没有 严格 的 数据 类 型 ,同时 是 采用 小 段 程序 的 编写 方 





式 来 实现 编程 的 。 
3) 动态 交互 性 
在 HTML 中 嵌入 JavaScript 小 程序 后 ,提高 了 网 页 的 动态 性 ,可 以 直接 对 用 户 提 交 的 
信息 在 客户 端 做 出 回应 。JavaScript 的 出 现 使 用 户 与 信息 之 间 不 再 是 一 种 浏览 与 显示 的 关 
系 , 而 是 一 种 实时 动态 、 可 交互 式 的 关系 。 
4) 跨 平台 性 
JavaScript 的 运行 环境 与 操作 系统 没有 关系 , 它 是 一 种 依赖 浏览 器 本 身 运行 的 编程 语 
,只 要 安装 了 支持 JavaScript 的 浏览 器 ,就 可 以 正确 地 执行 JavaScript 程序 。 
如 果 网 页 设计 者 只 想 简单 显示 网 页 的 内 容 , 那 么 JavaScript 不 是 必需 的 ,但 在 一 个 完整 
的 网 站 中 , 太 多 的 功能 需要 JavaScript 来 完成 。 


9.1.2 JavaScript 的 功能 


JavaScript 是 指 用 于 检测 网 页 中 的 各 种 事件 ,并 做 出 反应 。 虽 然 它 是 作用 于 客户 端的 
脚本 语言 ,其 语法 比较 松散 ,结构 也 比较 简单 ,但 其 功能 却 一 点 也 不 简单 ,主要 包括 以 下 几 个 
方面 。 

1) 表单 操作 

可 以 利用 JavaScript 来 动态 控制 表单 中 的 各 种 选项 ,实现 不 同 的 效果 。 一 般 用 户 输入 
的 内 容 是 否 合法 都 是 通过 JavaScript 来 实现 验证 的 ,这 样 可 以 减少 服务 器 的 负担 ,也 可 以 让 
用 户 有 更 好 的 体验 。 

2) 响应 事件 

用 户 在 浏览 器 中 的 操作 称 为 事件 ,JavaScript 可 以 响应 这 些 事 件 , 只 要 用 户 在 浏览 器 上 
操作 鼠标 、 键 盘 ,JavaScript 都 可 以 调用 一 段 程序 代码 来 响应 这 些 操作 。 

3) 动态 特效 

虽然 HTML 语言 没有 语法 ,不 具备 编程 能 力 , 但 JavaScript 不 仅 可 以 动态 地 在 网 页 中 
输出 内 容 , 还 可 以 在 网 页 中 实现 很 多 特效 ,如 文字 特效 .控件 特效 .图 片 特效 、 页 面 特 
效 等 。 

4) 记录 状态 

JavaScript 可 以 通过 读 取 Cookie 或 表单 的 隐藏 域 的 值 , 来 记录 用 户 的 当前 使 用 状态 ,为 
用 户 定制 个 性 化 的 服务 ,也 可 以 与 服务 器 进行 互动 。 

尽管 JavaScript 有 着 强大 的 功能 ,但 它 不 是 万 能 的 ,也 存在 一 定 的 局 限 性 ,主要 表现 在 
以 下 几 方 面 。 

(1) JavaScript 不 能 制作 多 用 户 程 序 。 

(2) JavaScript 在 浏览 器 中 不 允许 跨 域 操作 ,只 有 在 当前 域 中 操作 才 有 效 。 

(3) JavaScript 不 能 用 于 安全 性 认证 的 处 理 。 

(4) JavaScript 属于 客户 端 脚 本 语言 ,只 能 由 浏览 器 解析 执行 。 

(5) JavaScript 不 能 读 取 客 户 端 数据 库 中 的 数据 ,也 不 能 操作 其 他 的 任何 文件 (引用 文 
件 除外 ) ,但 服务 器 端 数据 库 中 的 数据 和 文件 可 以 读 取 , 如 果 一 定 要 读 取 客户 端 数据 库 中 的 
数据 和 文件 ,那么 必须 通过 其 他 组 件 来 实现 此 项 功能 。 
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9.2 HTML 文档 与 JavaScript 


JavaScript 的 面世 实现 了 在 HTML 文档 中 直接 岩 入 脚本 ,能 够 利用 各 种 元 素 和 超 链 接 
动态 响应 用 户 的 互动 需求 ,所 以 ,将 JavaScript 插入 到 HTML 代码 中 是 实现 Web 开发 的 关 
键 技术 。 


9.2.1 在 HTML 文 档 中 插入 JavaScript 


大 多 数 程序 都 有 非常 严格 的 编写 规范 ,JavaScript 也 不 例外 ,JavaScript 代码 必须 放 在 
网 页 代码 的 < script > 与 </script > 标签 之 间 。 当 浏览 器 解析 到 < script > 标签 时 ,计算 机 系统 
会 自动 调用 JavaScript 脚本 引擎 来 解析 代码 内 容 , 直 到 遇 到 </script > 标签 为 止 。 

因为 JavaScript 代码 是 嵌入 在 HTML 代码 中 的 ,为 了 使 页 面 结 构 清 晰 , 常 把 JavaScript 
部 分 的 代码 放 在 < head > 和 </head > 标签 之 间 , 当 然 , 也 可 以 放 在 < body > 和 </body > 标签 之 
间 ,或 者 在 HTML 文档 中 多 处 嵌入 ,但 这 不 是 推荐 的 方法 ,由 于 浏览 器 在 解析 HTML 文档 
时 是 自 上 而 下 的 顺序 ,设计 者 需要 确保 JavaScript 代码 被 优先 解析 ,因此 网 页 开发 者 一 般 都 
是 将 JavaScript 代码 放 在 < head > 和 </head > 标签 之 间 。 

【 例 9-1】 将 JavaScript 代码 插入 到 HTML 代码 中 。 


<! -- 程序 9-1.html --> 
< html > 
<head > 
<title> 将 JavaScript 代码 插入 到 HTML 代码 中 </title> 
< script> 
document. write(" 该 区 域 属于 JavaScript <br>"); 
</script > 
</head> 
<body> 
该 区 域 属于 HTML 的 正文 内 容 
</body> 
</html > 





上 面 < script > 和 </script > 标签 之 间 的 代码 即 为 JavaScript 代码 ,write() 为 JavaScript 
语言 中 document 对 象 的 方法 。 该 方法 的 作用 是 在 网 页 中 输出 一 行文 字 。write() 不 属于 
HTML, 只 有 调用 JavaScript 脚本 引擎 解析 才能 实现 响应 。 该 程序 运行 结果 如 图 9-1 所 示 ， 














在 图 中 第 一 行文 字 是 JavaScript 代码 输出 的 文字 ,第 二 行 是 HTML 代码 输出 的 文字 。 
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9-1 将 JavaScript 代码 插入 到 HTML 代码 中 





专家 点 拨 : 运行 该 程序 时 ,安全 级 别 高 的 浏览 器 会 阻止 该 程序 的 运行 ,如 图 9-2 所 示 。 
需要 用 户 对 提示 的 警告 信息 做 出 一 个 响应 , 即 允 许 浏览 器 阻止 的 内 容 运 行 ,该 程序 才能 正确 
运行 。 


将 JavaScript 代 码 搬入 到 HI 了 代码 --- 亿 | 器] 区 ] 
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图 9-2 运行 程序 被 浏览 器 阻止 


9.2.2 JavaScript 的 解析 顺序 


JavaScript 的 解析 顺序 与 HTML 的 解析 顺序 相同 ,都 是 按照 书写 顺序 解析 并 运行 的 。 
当 浏 览 器 解析 HTML 文档 时 ,一 旦 遇 到 JavaScript 代码 ,就 会 停止 对 HTML 代码 的 解析 ， 
转向 对 JavaScript 代码 的 解析 ,只 有 在 JavaScript 代码 解析 完毕 后 ,浏览 器 才 会 继续 解析 
HTML 的 代码 ， 

【 例 9-2〗 JavaScript 与 HTML 代码 运行 机 制 。 


<! -- 程序 9- 2.html --> 
<html> 
<head> 
<title> JavaScript 与 HTML 代码 相 结 合 运行 </title> 
</head> 
<body> 
<script> 
document. write("JavaScript 输出 信息 一 <br>"); 
document. write("JavaScript 输出 信息 二 < br >"); 
</script> 
本 行 是 HTML 中 的 文字 < br > 
<script> 
document. write("JavaScript 输出 信息 三 <br>"); 
</script> 
</body> 
</html > 





上 面 的 HTML 和 JavaScript 代码 被 浏览 器 解析 运行 后 的 结果 如 图 9-3 所 示 。 从 图 中 
可 以 看 出 ,一 个 HTML 文档 中 可 以 包含 任意 多 个 < script > 元 素 .它们 的 执行 顺序 就 是 它们 
在 文档 中 的 出 现 顺序 。 
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JavaScript 输 出 信息 一 
JavaScript 输 出 信息 二 
本 行 是 HTIL 中 的 文字 

JavaScript 输 出 信息 三 
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9-3 ”程序 9-2. html 的 运行 结果 


9.2.3 script 元 素 属性 


在 网 页 中 一 般 使 用 script 元 素来 实现 在 网 页 中 嵌入 JavaScript 脚本 ,该 元 素 包 含 一 个 
必 选 属性 (type) 和 5 个 可 选 的 属性 (language charset src .defer runat) 。 
(1) type 属性 : 用 来 设置 脚本 的 类 型 , 取 值 包括 application/ecmascript、application/ 


javascript、application/ x-ecmascript、application/ xjavascript 、text/ecmascript、text/javascript、 








text/jscript ,textUlivescript text/tcl, text/x-ecmascript 和 text/x-javascript。 对 于 岩 入 的 
JavaScript 脚本 来 说 ,设置 type 二 "text/ecmascript" 属 性 值 即 可 ,如 果 不 设置 也 没关系 ,因为 
默认 脚本 类 型 也 是 JavaScript, 即 text/javascript。 除 了 type 属性 之 外 ,language 属性 也 可 
以 用 来 设置 script 包含 的 脚本 类 型 。 

专家 点 拨 : 由 于 language 属性 不 是 标准 组 成 的 一 部 分 ,因此 不 建议 使 用 。 但 在 早期 版 
本 的 浏览 器 中 ,个 别 浏览 器 仅 支持 language 属性 ,所 以 不 妨 同 时 设置 language 和 type 
属性 。 

(2) src 属性 : 用 于 定义 包含 外 部 脚本 文件 的 URL。JavaScript 代码 除了 可 以 嵌入 到 
HTML 代码 中 外 ,还 可 以 独立 于 HTML 文件 存在 ,在 HTML 中 ,可 以 使 用 script 元 素 的 
属性 来 引用 外 部 的 脚本 文件 ,这 样 可 简化 HTML 文档 的 代码 ,让 HTML 代码 看 起 来 更 
直观 、 清 楚 。 

【 例 9-3】〗 引用 外 部 的 JavaScript 脚本 文件 。 





src 


a 


<! -- 程序 9- 3.html --> 
< htm]l > 
<head > 
<title> 引 用 外 部 脚本 文件 </title> 
< script type = "text/javascript" language = "javascript" src = "sample. js"> 
</script> 
</head> 
<body> 
</body> 
</html > 





在 本 例 中 使 用 script 元 素 的 src 属性 引用 了 同 目录 下 的 sample. js 文件 ,实现 了 引用 外 
部 脚本 文件 的 功能 ,代码 为 : 


document. write(" 由 sample.js 文件 输出 文字 ,并 且 该 文件 被 引用 "); 


上 面 的 sample. js 文件 中 只 有 一 条 输出 语句 ,JavaScript 代码 引用 sample. js 后 ,使 用 浏 
览 器 解析 运行 的 结果 如 图 9-4 所 示 。 
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由 sample. js 文件 输出 文字 , 并 且 该 文件 被 引用 





9-4 引用 外 部 脚本 文件 的 运行 结果 


专家 点 拨 : 外 部 文件 的 MIME 类 型 应 是 “application/x-javascript”, 这 样 可 以 使 用 
ASP JSP.PHP 等 其 他 服务 器 端 脚本 语言 动态 生成 JavaScript 代码 。 但 如 果 文 件 扩展 名 
为 .js, 也 能 够 将 其 正确 导入 并 执行 。 应 注意 的 是 ,一 旦 设置 了 src 属性 , 则 script 元 素 中 编 
写 的 任何 JavaScript 代码 就 可 能 无 效 。 

虽然 使 用 外 部 脚本 文件 与 做 入 在 HTML 代码 中 的 JavaScript 代码 的 作用 是 相同 的 ,但 
相 比 嵌入 在 HTML 代码 中 的 JavaScript 代码 具有 的 优势 有 编程 模块 化 .加 速 浏览 .增加 安 
全 性 和 简化 HTML 代码 ,以 及 还 可 以 引用 其 他 服务 器 上 的 脚本 文件 。 

(3) charset 属性 : 用 来 设置 script 元 素 包 含 的 脚本 的 字符 编码 ,默认 为 UTF-8 编码 。 

(4) defer 属性 : 可 以 延迟 脚本 的 执行 时 间 , 直 到 HTML 文档 已 经 全 部 显示 给 用 户 为 
止 ,但 该 属性 仅 被 IE 浏览 器 支持 。 

(5) runat 属性 : 可 以 设置 脚本 执行 的 位 置 , 默 认 在 客户 端 浏览 器 中 执行 ,如 设置 runat 一 
"server", 则 表示 在 服务 器 端 执行 。 


9.3 JavaScript 程序 基础 


JavaScript 与 其 他 程序 设计 语言 一 样 ,有 着 自己 独特 的 语言 规则 ,从 标识 符 到 变量 都 有 
着 严格 的 约束 ,因此 ,扎实 掌握 语法 规则 是 开发 Web 技术 的 基础 。 


9.3.1 标识 人 符 的 命名 规定 


JavaScript 的 标识 符 是 由 Unicode 字符 串 及 数字 等 组 成 的 ,一 般 分 为 用 户 自 定义 标识 
符 和 关键 字 。 其 中 ,用 户 自 定义 标识 符 一 般 用 于 变量 名 称 、 函 数 名 、 关 键 字 、 对 象 名 、 常 量 名 
等 标识 ; 而 关键 字 又 称 保留 字 , 具 有 特定 的 含义 ,可 以 完成 相应 的 Web 功能 ,编程 人 员 对 关 
键 字 只 能 使 用 ,不 能 修改 ,也 不 能 将 它们 用 作 程序 的 函数 名 、 变 量 名 、 对 象 名 等 。 

一 般 情况 下 ,合法 标识 符 必须 满足 以 下 几 条 规定 。 

(1) 标识 符 必须 在 同一 行 。 





JavaScript 基础 


击 避 蛋 


Web 前 误 唐 计 与 开发 一 一 HTML5 十 CSS3 十 JavaScript 微 课 版 





(2) 标识 符 不 能 与 关键 字 同 名 。 

(3) 标识 符 的 第 一 个 字符 必须 是 字母 .下 画 线 、 美 元 符号 ,第 一 个 字符 以 外 的 其 他 字符 
可 以 是 字母 .下 画 线 .美元 符号 .数字 ,但 不 能 有 空格 或 其 他 字符 。 例 如 

正确 的 变量 名 : hour .min、e45b、$ ert。 

错误 的 变量 名 : # ert、9abc。 

(4) JavaScript 是 严格 区 分 大 小 写 的 ,大 写字 母 和 小 写字 母 所 代表 的 意义 不 同 。 


9.3.2 JavaScript 的 数据 类 型 


JavaScript 是 一 种 无 数据 类 型 的 计算 机 语言 ,所 以 它 的 语法 比较 松散 ,但 并 不 代表 
JavaScript 中 没有 数据 类 型 的 区 别 , 只 是 JavaScript 会 对 不 同 的 数据 类 型 进行 自动 的 转化 。 
JavaScript 中 的 数据 类 型 可 分 为 基本 数据 类 型 和 复合 数据 类 型 。 其 中 基本 类 型 包括 数值 
型 .字符 型 和 布尔 型 ; 复合 数据 类 型 又 包括 对 象 .数组 和 函数 等 数据 类 型 。 下 面 只 简单 讲述 
数值 型 .字符 型 ,布尔 型 和 数组 类 型 ,其 他 数据 类 型 在 后 面 会 进行 详细 介绍 。 

1. 数值 型 

数值 型 是 JavaScript 中 最 基本 的 数据 类 型 ,JavaScript 中 所 有 的 数值 型 数据 均 采 用 
IEEE764 标准 定义 的 64 位 浮 点 格式 表示 , 即 Java、C 等 语言 中 的 double 类 型 。 在 
JavaScript 的 使 用 过 程 中 并 不 区 分 整数 和 浮 点 数 ,只 要 不 超过 其 类 型 的 数据 范围 ,都 可 以 获 
得 JavaScript 的 正确 支持 ,一 般 在 网 页 中 可 以 出 现 整 型 、 浮 点 型 .科学 记 数 型 .八进制 和 十 六 
进 制 等 形式 进行 应 用 。 

2. 字符 型 

在 JavaScript 中 ,字符 型 数据 又 称 为 字符 串 ,由 零 个 或 多 个 字符 组 成 。 程 序 中 的 字符 串 
应 该 由 单 引号 或 双 引号 定 界 起 来 ,使 用 双 引 号 和 使 用 单 引 号 的 效果 是 一 样 的 ,注意 开头 和 结 
尾 所 使 用 的 定 界 符 必须 保持 一 致 。 在 使 用 字符 串 的 过 程 中 ,如 需要 使 用 另 一 种 定 界 符 , 正 确 
的 做 法 是 在 有 双 引 号 标记 的 字符 串 中 加 入 使 用 单 引 号 的 引用 字符 ,在 有 单 引 号 标记 的 字符 
串 中 加 入 使 用 双 引 号 的 引用 字符 。 例 如 ， 






































"学 习 'JavaScript' 有 趣 吗 ?" 


在 拼接 字符 串 时 ,可 通过 加 法 符号 拼接 多 个 字符 串 , 从 而 得 到 一 个 新 字符 串 。 如 果 是 数 
值 型 数据 和 字符 串 进行 拼接 ,那么 数值 数据 会 被 自动 转换 成 字符 串 再 进行 拼接 ; 如 果 加 号 
两 边 的 操作 数 都 是 数字 ,那么 进行 数字 的 加 法 运算 ,并 得 出 数值 型 数据 结果 。 

【 例 9-4】 字符 串 操作 。 


<! -一 程序 9- 4.html --> 
< html > 
<head> 
< meta http - equiv = "Content — Type" content = " text/html; charset = 
gb2312" /> 
<title> 字 符 串 操作 </title> 
</head> 
<body > 
下 面 是 JavaScript 程序 动态 生成 的 内 容 : <br> 





< script language = "javascript"> 
document. write(" 大 家 好 ,我 来 自 <br >"); 
document. write(" 中 国 " + "的 北京 "+ "<br>"); 
document. write(2011 + "年 是 中 国共 产 党 建党 " + 70+ "周年" + "< br >"); 
document. write(8+5+' 亿 人 为 祖国 祝福 '); 

</script> 

</body> 
</html > 





本 例 的 浏览 效果 如 图 9-5 所 示 ,其 中 “2011” 和 “70” 都 是 直接 与 字符 串 拼 接 的 ,而 “8 十 5” 
则 是 进行 了 加 法 运算 后 再 与 字符 串 进行 拼接 的 。 
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下 面 是 JavaScript 程 序 动态 生成 的 内 容 ， 
大 家 好 , 我 来 自 


中 国 的 北京 
2011 年 是 中 国共 产 党 建党 70 周 年 
13 亿 人 为 祖国 祝福 





图 9-5 字符 串 操 作 示例 
为 了 在 字符 串 中 放 入 一 些 无 法 输入 的 字符 ,JavaScript 提供 了 转 义 字符 。 例 如 用 字符 
串 在 网 页 的 页 面 中 要 显示 一 个 目录 “d:\ 计 算 机 \javascript”, 这 个 问题 涉及 一 个 特殊 的 符号 
“\”, 这 个 特殊 的 符号 在 计算 机 中 是 不 能 直接 显示 的 ,在 JavaScript 中 ,由 反 斜 本 开头 ,后 接 
若干 有 效 的 字符 组 合 的 符号 ,就 称 为 转 义 字符 。 比 较 常 用 的 转 义 字符 及 含义 如 表 9-1 所 示 。 
表 9-1 JavaScript 中 的 转 义 字符 


转 义 字符 代表 含义 转 义 字符 代表 含义 
\n 换行 符 \f 换 页 符 
\t 水 平 制 表 符 % 单 引号 
\r 回 车 符 可 双 引 号 
\b 退 格 符 \ 反 和 斜 线 符 





因此 ,正确 的 显示 d:\ 计 算 机 \javascript 的 语句 应 该 为 : 
document.writeln("d:\\ 计 算 机 \\javascript"); 
3. 布尔 型 


JavaScript 中 的 布尔 类 型 使 用 非常 广泛 ,布尔 型 只 含有 true( 真 ) 和 false( 假 ) 两 个 值 ,一 
般 用 于 逻辑 运算 和 关系 运算 中 ,代表 状态 或 标志 。 
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【 例 9-5〗 布尔 型 数据 操作 。 


<! -- 程序 9- 5.html --> 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 布 尔 类 型 </title> 
</head> 
<body> 
2 等 于 1 吗 ?<br /> 
< script type = "text/javascript"> 
document. write(" 这 个 问题 的 结果 是 一 个 " + typeof(2 == 1) + "类 型 的 数据 <br />") 
document. write(" 这 个 问题 的 结果 是 "); 站 回 
document. write(2==1); 
</script > 
</body> 
</html > 视频 讲解 





本 例 通 过 typeof 运算 符 显 示 了 “2 二 二 1” 这 个 表达 式 结 果 的 数据 类 型 ,然后 直接 输出 这 
个 布尔 值 (false) ,浏览 效果 如 图 9-6 所 示 。 
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2 等 于 1 吗 ? 
这 个 问题 的 结果 是 一 个 boolean 类 型 的 数据 
这 个 问题 的 结果 是 false 








图 9-6 布尔 类 型 示例 


4. 数组 
数组 就 是 某 类 数据 的 集合 ,通过 下 标 来 标记 数组 中 的 元 素 ,数据 类 型 可 以 是 整 型 .字符 
串 ,甚至 是 对 象 ,定义 数组 的 语法 格式 为 : 


var 数组 名 = new Array( 元 素 个 数 ); 


在 JavaScript 中 ,数组 的 元 素 可 以 是 任意 的 数据 类 型 ,甚至 是 男 一 个 数组 ,同一 个 数组 
中 的 不 同 元 素 可 以 是 不 同 的 数据 类 型 。 用 数组 名 称 加 [下 标 ] 来 调用 ,下 标 从 0 开始 。 例 如: 


vara = new Array(10); // 为 a 已 经 开辟 了 内 存 空 间 , 包 含 10 个 元 素 


a[0] = true; 


a[1] = document. getElementById("text"); 
a[2] = {x:11, y:22}; 
a[3] = new Array(); // 数 组 里 面 可 以 放 数 组 对 象 


数组 可 以 实例 化 的 时 候 直 接 赋值 。 例 如 : 


vara = new Array(1, 2, 3, 4, 5); 





数组 的 长 度 属性 关键 字 是 length, 主 要 方法 有 join() 和 sort() 等 。 
【 例 9-6】 JavaScript 中 数据 类 型 的 数组 应 用 。 


<! -- 程序 9- 6.html --> 
<htm]l > 
<head > 
<title> 数 组 的 应 用 </title> 
</head > 
<h3 > Example: 数 组 的 应 用 </h3 > 
<pre> 





< script language = "javascript"> 
Var studentArray = new Array("jacky", "lily", "lucy"); 
document. writeln( studentArray. join()); 
document. writeln( studentArray. join(";")); 
var numberRrray = new Array(200,120,75, 38,0); 
document. writeln( numberArray. sort()); 
document. writeln( numberArray. sort(function(x, y) {return y— x;})); 

</script > 

</pre> 
</html > 


数组 中 有 许多 内 置 的 方法 ,join() 方 法 可 以 将 数组 中 的 所 有 元 素 转化 为 字符 型 ,然后 将 
它们 连接 起 来 ,默认 的 间隔 符号 是 逗号 。 数 组 的 sort() 方 法 可 以 对 数组 元 素 进行 排序 ,排序 
规则 由 方法 的 参数 指定 。 上 面 的 代码 被 浏览 器 解析 运行 后 的 结果 如 图 9-7 所 示 。 
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Example: 数 组 的 应 用 


jacky, lily, lucy 
jacky: lily: lucy 
0, 120, 200, 38, 75 
200, 120, 75, 38, 0 





图 9-7 数组 的 应 用 示例 
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在 JavaScript 中 ,还 有 两 个 特殊 的 数据 类 型 ,Null 和 Undefined。Null 类 型 唯一 的 数据 
值 是 null,Undefined 类 型 的 属性 值 是 undefined。 其 中 ,null 表示 已 经 对 变量 赋值 ,只 是 赋 
的 值 是 空 值 ; undefined 表示 变量 还 不 存在 ,或 者 存在 但 没有 赋值 。 


9.3.3 变量 


变量 可 以 用 来 存储 或 表示 一 个 数据 的 名 称 , 它 代表 了 内 存 中 的 存储 单元 ,其 属性 值 在 程 
序 的 运行 过 程 中 随时 可 以 发 生 改 变 。 可 以 把 变量 看 作 是 一 个 容器 ,用 于 存放 一 些 数 据 , 需 要 
时 取出 来 使 用 ; 也 可 以 再 放 其 他 的 数据 以 替换 原始 数据 ,也 就 是 说 变量 是 临时 存放 数据 的 
地 方 。 在 程序 中 可 以 引用 变量 来 操作 其 中 的 数据 ,这 与 计算 机 硬件 系统 的 工作 相似 。 当 声 
明 一 个 变量 时 ,实际 上 就 是 向 计算 机 系统 发 出 申请 ,在 内 存 中 划一 块 小 区 域 存放 数据 ,这 块 
小 区 域 就 是 变量 。 

1. 变量 的 声明 

变量 在 使 用 前 必须 先 声明 ,把 变量 声明 为 合适 的 数据 类 型 是 提高 程序 效率 的 手段 ,也 是 
很 好 的 编程 习惯 。JavaScript 声明 变量 的 方法 很 简单 ,不 需要 指定 变量 的 数据 类 型 ,而 是 统 
一 使 用 关键 字 var 来 声明 ,其 声明 方法 为 : 




















var 变量 名 称 ; 
var 变量 名 称 1, 变量 名 称 2, 变量 名 称 3,…; 
var 变量 名 称 = 变量 值 ; 


变量 名 称 不 能 随意 命名 ,必须 符合 标识 符 的 命名 规则 。 一 个 var 可 以 同时 定义 多 个 变 
量 ,并且 多 个 变量 可 以 是 不 同 的 数据 类 型 ,不同 的 变量 之 间 用 逗号 分 隔 , 语 句 的 结束 符号 是 
分 号 。 例 如 : 


Var num; 
var student_count = new Array(10); 
var age = 20, name = "vison"; 


在 没有 赋予 变量 数据 值 时 ,其 默认 值 为 undefined, 不 能 参与 程序 的 运算 ,声明 变量 的 
“一 "不 是 等 号 ,而 是 赋值 符号 ,表示 把 右边 的 数据 赋值 给 左边 的 变量 。 

2. 变量 的 使 用 

变量 是 临时 存储 数据 ,其 值 在 运行 的 过 程 中 可 以 动态 地 改变 。 

【 例 9-7】 变量 的 使 用 。 


<! -- 程序 9- 7.html --> 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 变 量 的 使 用 </title> 
< script type = "text/javascript"> 
var area = " 圆 面积 ", r = 10, pi=3.14; 
</script> 
</head> 
<body> 


< script type = "text/javascript"> 
document. write(" 半 径 为 10, 求 面积 及 周 长 : "+ "<br>"); 
document. write(area+" ="+pixrx*rti"<br>"); 
area= "圆周 长 "; 
document. write(area +"="+pixr*2+"<br>"); 
document. write(" 将 圆 半径 增加 10, 求 周 长 : "+ "< br>"); 
1 
document. write(area +"="+pixr*2+"<br>"); 

</script> 

</body > 
</html > 





本 例 充分 体现 了 变量 在 运算 中 的 重要 性 ,以 及 变量 值 在 运行 过 程 中 的 动态 改变 ,浏览 的 
效果 如 图 9-8 所 示 。 





变量 的 使 用 - Windows Internet Ezplorer [| 口 | 区 | 
文件 编辑 下 ) 查看 YW) 收藏 习 &) 工具 民 ) 帮助 人 0 








} 





半径 为 10， 求 面积 及 周 长 ， 
面积 =314 


积 

圆周 长 =62. 800000000000004 
将 圆 半径 增加 10， 求 周 长 
周 长 =125. 60000000000001 








图 9-8 变量 的 使 用 示例 


9.4 常用 运算 符 


程序 运行 时 需要 靠 各 种 运算 进行 ,运算 时 需要 各 种 运算 符 与 表达 式 参 与 。JavaScript 
作为 一 门 脚本 语言 .与 其 他 语言 一 样 .也 有 语言 本 身 的 运算 符 , 用 于 完成 一 些 指定 的 操作 。 
JavaScript 语言 的 运算 符 主 要 分 为 算术 运算 符 、 逻 辑 运算 符 .比较 运算 符 等 。 


9.4.1 算术 和 运算 符 


算术 运算 符 包 括 加 法 (十 ) ,减法 (一 )、 乘 法 (* )、 除 法 (/) , 求 余 (%)、 递 增 ( 十 十 )、 递 减 
《一 一 六 到 友人 一 冯 正 号 (十 ) 

1. 加 法 运算 符 ( 十 ) 

加 法 运算 符 是 一 个 二 元 运算 符 , 用 法 与 数学 中 的 加 法 一 样 ,但 除了 实现 加 法 功能 以 外 ， 
它 还 可 以 作为 字符 串 的 连接 符号 ,只 要 它 两 侧 的 操作 数 有 一 个 或 两 个 都 是 字符 数据 时 , 它 就 
可 以 作为 字符 串 的 连接 符号 。 如 "123" 十 12. 意 味 着 计算 机 先 将 数字 12 转换 成 字符 串 , 然 后 
执行 字符 串 拼接 ,结果 为 12312。 
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2. 减法 运算 符 ( 一 ) 

减法 运算 符 是 一 个 二 元 运算 符 , 用 法 与 数学 中 的 减法 一 样 。 但 除了 实现 减法 功能 以 外 ， 
还 可 以 完成 字符 串 向 数字 的 转换 。 如 "123" 一 12, 意 味 着 计算 机 先 将 字符 串 "123" 转 化 成 数 
值 型 123 ,然后 执行 减法 ,结果 为 111 。 

3. 乘法 运算 符 (* ) 

乘法 运算 符 是 一 个 二 元 运算 符 , 可 以 实现 操作 数 的 乘法 功能 ,用 法 与 数学 中 的 乘法 一 
样 。 如 果 操 作 数 不 是 数值 型 但 可 以 转化 成 数值 型 的 ,那么 该 运算 符 会 将 运算 数 自动 转化 为 
数值 型 数据 再 运算 ; 如 果 操 作 数 无 法 转化 为 数字 型 的 ,运算 结果 将 返回 NaN。 

4. 除法 运算 符 W) 

除法 运算 符 是 一 个 二 元 运算 符 , 可 以 实现 操作 数 的 除法 功能 ,用 法 与 数学 中 的 除法 一 
样 。 如 果 操 作 数 不 是 数值 型 但 可 以 转化 成 数值 型 的 ,那么 该 运算 符 会 将 运算 数 自动 转化 为 
数值 型 数据 再 运算 ; 操作 数 无 法 转化 为 数值 型 的 ,运算 结果 将 返回 NaN。 

如 果 除 数 为 正 数 ,被 除数 为 0, 运算 结 果 为 Infinity; 如 果 除 数 为 负数 ,被 除数 为 0, 运 算 
结果 将 为 一 Infinity; 如 果 除 数 和 被 除数 都 为 0, 运 算 结 果 将 返回 NaN。 

5. 求 余 运 算 符 (%) 

求 余 运算 符 是 一 个 二 元 运算 符 , 可 以 实现 对 操作 数 求 余 功 能 ; 如 果 操 作 数 不 是 数值 型 
但 可 以 转化 成 数值 型 的 ,那么 该 运算 符 会 将 运算 数 自动 转化 为 数值 型 数据 再 运算 ; 如 果 操 
作 数 无 法 转化 为 数值 型 的 ,运算 结果 将 返回 NaN。 另 外 ,任何 数字 和 字符 对 0 求 余 操 作 , 运 
算 结果 都 将 返回 NaN。 

6. 递增 运算 符 ( 十 十 ) 

递增 运算 符 是 一 个 一 元 运算 符 , 可 以 实现 对 操作 数 进行 递增 操作 功能 , 增 量 为 1。 这 个 
运算 符 的 操作 数 只 能 是 单个 的 变量 ,不 能 是 常量 或 表达 式 ; 如 果 运 算数 无 法 转化 为 数字 型 ， 
那么 运算 结果 将 返回 NaN; 另外 ,递增 运算 符 还 分 为 前 置 和 后 置 的 递增 ,二 者 的 规则 不 同 ， 
前 置 递增 先是 将 操作 数 的 值 加 1. 然后 将 变化 后 的 值 代表 递增 表达 式 的 值 参 加 相关 运算 ; 
后 置 递增 先是 将 操作 数 的 值 代表 递增 表达 式 的 值 参加 运算 ,然后 再 对 操作 数 的 值 加 1。 
例如 : 


Var datal = 20, data2 = 30; 
Var data_l, data 2; 


data_1= datal+t+; //data_1= 20, datal = 21 
data 2= ++data2; //data 2= 31,data2= 31 
7. 递减 运算 符 ( 一 一 ) 


递减 运算 符 是 一 个 一 元 运算 符 。 可 以 实现 对 操作 数 进行 递减 操作 功能 , 减 量 为 1; 用 法 
与 递增 运算 符 ( 十 十 ) 相 同 ,不 同 的 递减 运算 符 做 减法 运算 。 例 如 : 


var datal = 20, data2 = 30; 

Var data_1, data 2; 

data_1= datal ——; //data_1= 20,datal = 19 
data 2= data2; //data_2= 29, data2 = 29 


9.4.2 赋值 运算 从 
赋值 运算 符 (==) 的 作用 是 将 一 个 数据 值 赋 给 一 个 变量 ,数组 元 素 或 对 象 的 属性 等 。 例 如 : 


d=25; // 将 25 赋值 给 d 
c=a+b; // 将 a+b 的 值 赋 给 c 
人 // 将 3 分 别 赋 给 x.y 和 z 


除了 这 种 简单 的 赋值 运算 符 外 ,JavaScript 还 支持 一 种 带 操 作 的 赋值 运算 符 ,这 种 运算 











符 是 在 简单 赋值 运算 符 前 加 双 目 运算 符 构成 ,主要 包括 十 一 、 三 
>>=、&. 二 ==、| 二、>>>= 二 。 其 运算 过 程 是 用 运算 符 左边 的 操作 数 加 ( 减 , 乘 , 除 ,位 与 








/或 / 异 或 ……) 运 算 符 右边 的 操作 数 , 并 把 结果 赋值 给 左边 的 操作 数 。 例 如 : 


x+= 了 等 价 于 工 = 工 + 了 
Xx =y+7 等 价 于 Xx=Xxk(y+7) 


9.4.3 关系 运算 符 


关系 运算 符 主要 包括 等 于 (一 一 ) ,不 等 于 (! 王 ) 大 于 (>) 小 于 (<<) 、 大 于 等 于 (二 ==)、 小 
于 等 于 ( 志 一 ) 全 等 于 运算 符号 (一 一 一 ) 及 非 全 等 于 运算 符号 (! 一 一 ) ,它们 用 于 测试 操作 
数 之 间 的 关系 ,如 大 小 比较 .是 否 相 等 ,并 根据 比较 的 结果 返回 一 个 布尔 值 。 

关系 运算 符 的 操作 数 可 以 是 数值 型 .字符 型 ,布尔 型 的 数据 ,也 可 以 是 对 象 。 例 如 ,运算 
符 的 两 个 操作 数 中 有 一 个 数值 类 型 , 另 一 个 为 字符 串 类 型 ,字符 串 类 型 将 转换 成 数字 类 型 进 
行 比较 。 而 如 果 运算 符 的 两 个 操作 数 都 是 字符 串 类 型 时 ,字符 串 将 一 个 个 字符 自 左 到 右 进 
行 比较 ,一 旦 发 现 有 不 同 字符 马上 停止 比较 ,只 比较 这 个 位 置 两 个 不 同 字符 的 字符 编码 数 
值 , 这 个 数值 即 字符 在 Unicode 编码 集中 的 数值 。 例 如 ,“abcd” 和 “abda” 进 行 比较 ,只 会 比 
较 第 一 个 操作 数 的 字符 “c” 和 第 两 个 操作 数 的 字符 “d” 的 编码 值 。 由 于 大 小 写字 母 的 
Unicode 编码 值 不 同 ,所 以 在 比较 字符 串 时 , 常 需要 使 用 String. toLowerCase() 方 法 把 字符 
串 统一 转换 为 小 写字 母 ,或 者 用 String. toUpperCase( ) 方 法 把 字符 串 统一 转换 为 大 写 。 

专家 点 拨 : Unicode 是 一 种 字符 编码 方法 ,由 国际 组 织 设计 ,可 以 容纳 全 世界 所 有 语言 
文字 的 编码 。 


关于 等 于 的 概念 在 JavaScript 中 有 着 更 复杂 的 含义 ,一 一 ”和 ”一 一 一 "两 个 符号 都 是 
用 于 测试 两 个 操作 数 的 值 是 否 相等 ,操作 数 可 以 使 用 任意 数据 类 型 。 但 "一 一 "与 “! 一 ”对 
操作 数 的 一 致 性 要 求 比较 宽松 ,可 以 通过 数据 类 型 转换 后 进行 比较 ,而 “一 一 一 "与 "1 一 一 一 ” 


对 操作 数 的 一 致 性 要 求 比较 严格 ,虽然 该 运算 符 不 要 求 两 侧 的 操作 数 类 型 相同 ,但 是 只 有 在 
两 个 操作 数 类 型 相同 并 且 属 性 值 相同 的 情况 下 , 才 会 返回 true, 否 则 返回 false, 且 不 会 自动 
转化 操作 数 的 类 型 。 

【 例 9-8】 比较 运算 符 的 应 用 。 

<! -- 程序 9- 8.html --> 


<html> 
<head> 
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< meta http - equiv = "Content — Type" content = "text/html; charset = 


gb2312" /> 
<title> 比 较 运 算 符 的 应 用 </title> 
</head> 
ody 
< script type = "text/javascript"> 





视频 讲解 


document. write(""10> 20" 操 作 后 返回 的 值 为 : "+ (10> 20) + "< br />"); 
document.write(""'abc'>'a'" 操 作 后 返回 的 值 为 : "+ ('abc'>'a') + "< br />"); 
document. write(""10 > = 20" 操 作 后 返回 的 值 为 : "+ (10>=20)+ "< br />"); 
document.write(""10> =10" 操 作 后 返回 的 值 为 : "+ (10>=10)+ "<hr />"); 


document. write(""10 == 10" 操 作 后 返回 的 值 为 : "+ (10 == 


10) + "< br />"); 


document. write(""'abc' == 'abc'" 操 作 后 返回 的 值 为 : "+ ('abc' == 'abc') + "< br />"); 


document. write(""'abcd'>'abda， 


"操作 后 返回 的 值 为 : " + ("abcd'>'abda') + "< br />"); 


document. write(""10 == =10" 操 作 后 返回 的 值 为 : "+ (10== =10)+"< br />"); 





document. write(""'Rbc' 
document. write(""'10 


= = 'abc'" 操 作 后 返回 的 值 为 : "+ ('abc' == = 'abc') + "< br />"); 
10" 操 作 后 返回 的 值 为 : "+ ('10' == 10) + "< br />"); 


document. write(""'10' == = 10" 操 作 后 返回 的 值 为 : "+('10' == =10) + "< hr />"); 
document. write(""10!= 10" 操 作 后 返回 的 值 为 : "+ (10!= 10) + "<br />"); 


document. write(""'10'!== 10" 操 作 后 返回 的 值 为 : "+ ('10'!== 
</script> 
</body> 
</html > 


本 例 的 浏览 器 解析 运行 
算 符 的 用 法 。 


比较 运算 符 的 应 用 
文件 下) 编 缉 至) 查看 Q 收藏 天 &) 工具 CI) 和 助 00 
DO rors hh LSLE 好 | X 
安 收 天。 | 国有 有 | 
“10>20 ”操作 后 返回 的 值 为 ，false 
“abc > a ”操作 后 返回 的 值 为 ，true 


“10>=20 ”操作 后 返回 的 值 为 ，false 
“10>=10 ”操作 后 返回 的 值 为 ，true 


Windows Internet Explorer 














“10==10 ”操作 后 返回 的 值 为 true 

“abc ==' abc” ”操作 后 返回 的 值 为 ，true 
abcd > abda’ 操作 后 返回 的 值 为 ， false 
“10===10 “操作 后 返回 的 值 为 ，true 

人 Abc' ===" abe’ i true 














“10 二 10 ”操作 后 返回 的 值 为 ，true 
“10'===10 ”操作 后 返回 的 值 为 ，false 


“10!=10 ”操作 后 返回 的 值 为 ，false 
”10 !==10 ”操作 后 返回 的 值 为 ，true 








是 我 的 电脑 


图 9-9 比较 运算 符 的 运用 示例 


9.4.4 逻辑 运算 符 


逻辑 运算 符 包括 逻 辑 与 (&&) 、 人 逻辑 或 (| |) 及 逻辑 非 (1)3 个 运算 符 , 用 来 执行 


算 , 其 中 人 逻辑 与 (&.&.) 与 逻辑 或 (| | ) 是 二 元 运算 符 ,逻辑 非 (!) 是 一 元 运算 符 。 


10) + "< br />"); 


的 结果 如 图 9-9 所 示 , 从 浏览 结果 可 以 很 清楚 地 看 到 各 关系 运 


布尔 运 


逻辑 运算 符 要 求 两 个 操作 数 都 必须 是 布尔 类 型 的 操作 数 或 可 以 转换 成 布尔 类 型 的 操作 
数 ,其 运算 结果 返回 true 或 false, 它 们 的 优先 级 大 小 关系 为 !&&& 之 | |。 在 JavaSeript 
中 ,所 有 非 0 的 数值 弄 数据 可 看 作为 true, 而 0 和 NaN 则 可 看 作为 false, 故 即便 是 逻辑 运算 
符 的 返回 结果 为 数值 型 ,也 可 以 看 作 是 true 或 false。 字 符 串 当 且 仅 当 为 空 时 被 认为 是 
false。 对 于 对 象 而 言 ,null 的 对 象 可 以 被 转 成 false, 非 null 的 对 象 可 以 被 转 成 true。 

人 逻辑 与 (&.&) 的 运算 规则 是 只 有 它 两 侧 的 操作 数 的 值 同 时 为 true, 运 算 结果 才 为 true， 
其 余 情 况 运 算 结果 为 false; 

逻辑 或 (| | ) 的 运算 规则 是 只 要 它 两 侧 的 操作 数 的 值 有 一 个 为 true, 运 算 结 果 就 为 true， 
其 余 情 况 运 算 结果 为 false; 

逻辑 非 (!) 是 一 元 运算 符 ,其 位 置 在 操作 的 前 面 ,运算 时 对 操作 数 的 原 布 尔 值 取 反 。 即 
当 操 作 数 的 值 为 true 时 ,人 逻辑 非 运算 符 返 回 的 值 为 false, 反 之 为 true。 

【 例 9-9】 逻辑 运算 符 的 应 用 。 


<! -- 程 序 9- 9.html --> 
<html> 
<head> 
<meta http - equiv= "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 逻 辑 运算 符 的 应 用 </title> 
< script type = "text/javascript"> 
var suml =1>2; 
var sum2=1<2; 
</script> 
</head> 
<body> 
说 明 : suml =1>2,sum2 =1<2。<hr /> 
< script type = "text/javascript"> 
document. write("< h3 > 逻辑 与 运算 符 示 例 </h3 >"); 
document. write("" suml&&sum2" 操 作 后 返回 的 值 为 : " + (suml&&sum2) + "< br />"); 
document. write(""suml&&true" 操 作 后 返回 的 值 为 : " + (suml&&true) + "<br />") 
document. write(""sum2&&true" 操 作 后 返回 的 值 为 : " + (sum2&&true) + "< br />") 
document. write(""suml&&false" 操 作 后 返回 的 值 为 : " + (suml&&false) + "< br />"); 
document. write(""sum2&&false" 操 作 后 返回 的 值 为 : " + (sum2&&false) + "< br />"); 
document. write(""0885" 操 作 后 返回 的 值 为 : "+ (0&&5) + "< br />"); 
// 结 果 可 看 作 是 false 
document. write(""3&&5" 操 作 后 返回 的 值 为 : "+ (3&&5) + "<br />"); 
// 结 果 可 看 作 是 true 
document. write(""5&&3" 操 作 后 返回 的 值 为 : "+ (5&&3) + "<br />"); 
document. write("' 中 国人 '&&3" 操 作 后 返回 的 值 为 : "+ (' 中 国人 '&8&3) + "<br />"); 
document. write(""3&&' 中 国人 ' "操作 后 返回 的 值 为 : "+ (3&&' 中 国人 ') + "<br />"); 
document. write("< h3 > 逻辑 或 运算 符 示例 </h3 >"); 
document. write(""suml| |sum2" 操 作 后 返回 的 值 为 : " + (suml||sum2) + "<br />"); 
document. write("" suml | |true" 操 作 后 返回 的 值 为 : " + (suml||true) + "<br />"); 
document. write(""sum2| |true" 操 作 后 返回 的 值 为 : " + (sum2||true) + "<br />"); 
document. write(""suml| |false" 操 作 后 返回 的 值 为 : " + (suml||false) + "< br />"); 
document. write(""sum2| |false" 操 作 后 返回 的 值 为 : "+ (sum2||false) + "<br />"); 
document. write("< h3 > 逻辑 非 运算 符 示 例 </h3 >"); 
document. write("™! sum2" 操 作 后 返回 的 值 为 : "+ (!sum2) + "<br />"); 
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document. write(""!suml" 操 作 后 返回 的 值 为 : "+ (!suml) + "<br />"); 
document. write(""!5" 操 作 后 返回 的 值 为 : " + (!5) + "<br />"); 
document. write(""!0" 操 作 后 返回 的 值 为 : "+ (!0) + "<br />"); 
document. write(""!' 中 国人 '" 操 作 后 返回 的 值 为 : "+ (!' 中 国人 ') + "<br />"); 
</script > 
</body> 
</html > 


本 例 的 浏览 效果 如 图 9-10 所 示 ,需要 注意 的 是 ,在 进行 逻辑 与 运算 时 ,首先 要 计算 第 一 
个 操作 数 , 即 &&. 左边 的 表达 式 , 如 果 它 的 值 为 false, 或 者 可 能 被 转换 为 false( null、NaN、 
0、undefined) , 则 它 将 返回 左边 表达 式 的 值 作为 逻辑 与 运算 的 结果 ,否则 , 它 将 计算 第 二 个 
操作 数 , 即 &.& 右边 的 表达 式 , 并 返回 第 二 个 操作 数 的 值 作为 逻辑 与 运算 的 结果 ,如 本 例 中 
的 第 19 行 至 第 23 行 代码 的 结果 


document. write(""08&5" 操 作 后 返回 的 值 为 : "+ (088&5) + "<br />"); 
document. write(""38&5" 操 作 后 返回 的 值 为 : " + (3&&5) + "<br />"); 
document. write(""5&S&3" 操 作 后 返回 的 值 为 : " + (5&&3) + "<br />"); 
document. write(""' 中 国人 '&83" 操 作 后 返回 的 值 为 : "+ (' 中 国人 '&&3) + "<br />"); 
document. write(""38&&' 中 国人 '"" 操 作 后 返回 的 值 为 : "+ (38&' 中 国人 ') + "<br />"); 


多 辑 运算 符 的 应 用 - Windows Internet Explorer 加 回国 


文件 中 ”编辑 于 ) 查看 WW) 收 基 天 WA) 工具 CD) 帮助 00 
DDO” erye htnl 图 | 好 | x 
突 收藏 天 。 | 感 记 加 运算 符 的 应 用 国 




















说 明 ，suml=1>2，sum2=1<2。 


逻辑 与 运算 符 示例 


“suml8&sum2 ”操作 后 返回 的 值 为 ，false 
“suml&&true ”操作 后 返回 的 值 为 ，false 
“sum28&true ”操作 后 返回 的 值 为 ，true 
“suml&&false ”操作 后 返回 的 值 为 ，false 
“sum28&false ”操作 后 返回 的 值 为 ，false 


“5883 "操作 后 返回 的 值 为，3 
< 中 国人 853" 提 作 此 话 四 的 值 为， 
“aa 中 国人 人” "操作 后 衣 加 的 值 为 : 中 国人 


逻辑 或 运算 符 示例 


“suml | |sum2 ”操作 后 返回 的 值 为 ，true 
“suml | |true ”操作 后 返回 的 值 为 ，true 
“sum2 | |true ”操作 后 返回 的 值 为 ，true 
“suml | |false ”操作 后 返回 的 值 为 ，false 
“sum2 | |false ”操作 后 返回 的 值 为 ，true 


逻辑 非 运 算 符 示 例 


“!sum2 ”操作 后 返回 的 值 为 ，false 
“!suml ”操作 后 返回 的 值 为 ，true 

“1!5 ”操作 后 返回 的 值 为 ，false 

“1!0 ”操作 后 返回 的 值 为 ，true 

“中 国人 ” ”操作 后 返回 的 值 为 ，false 




















图 9-10 逻辑 运算 符 示 例 


9.4.5 条 件 和 运算 符 
条 件 运算 符 是 一 个 三 元 运算 符 , 其 语法 格式 为 ; 


操作 数 1? 操 作 数 2: 操作 数 3 





条 件 运 算 符 有 3 个 操作 数 ,第 一 个 操作 数 的 值 是 布尔 型 ,通常 是 由 一 个 表达 式 计算 而 
来 ,第 二 操作 数 和 第 三 个 操作 数 可 以 是 任意 类 型 的 数据 或 任意 类 型 的 表达 式 。 运 算 规 则 是 ， 
如 果 第 一 个 操作 数 的 值 为 真 , 则 条 件 表达 式 的 值 就 是 第 二 个 操作 数 的 值 ; 反之 ,如 果 第 一 操 
作 数 的 值 为 假 , 则 条 件 表达 式 的 值 就 是 第 三 个 操作 数 的 值 。 

【 例 9-10】 JavaScript 条 件 运 算 符 应 用 。 

源 代码 如 下 : 


<! -- 程序 9- 10. html --> 
< htm]l > 
<head > 
<title> JavaScript 条 件 运算 符 应 用 </title> 
< script type = "text/javascript" language = "javascript"> 
var m= 20,n=15; 
document. writeln(m>n? "m 大 于 n":"m 小 于 n"); 
</script > 
</head> 
<body> 
</body > 
</html > 





在 本 例 中 “document. writeln (mn?"m 大 于 n":"m 小 于 n");” 语 句 的 运算 过 程 
如 下 。 

(1) 先 判断 mn 返回 值 . 该 语句 的 返回 值 为 true。 

(2) 返回 字符 串 “m 大 于 n”, 然 后 使 用 document. writeln() 将 返回 的 字符 串 输出 。 

本 例 的 浏览 结果 如 图 9-11 所 示 。 
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图 9-11 条 件 运算 符 的 应 用 示例 


9.4.6 其 他 运算 从 
在 JavaScript 中 , 除 以 上 介绍 的 常用 运算 符 外 ,经 常 还 会 用 到 去 号 运算 符 (,) 、 新 建 运 算 
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符 (new) 、 删 除 运算 符 (delete) .typeof 运算 符 等 。 

(1) 逗号 运算 符 (,): 二 元 运算 符 , 其 运算 规则 是 首先 计算 其 左边 表达 式 的 值 ,然后 计 
算 其 右边 表达 式 的 值 ,最 右边 表达 式 的 值 就 是 整个 表达 式 的 属性 值 。 例 如 : x 二 (a 二 9 x* 5， 
a 十 8/3); 执行 过 程 为 先 计算 “a 二 9 x 5”, 得 出 a 一 45, 再 计算 a 十 8/3, 即 45 十 8/3, 结 果 为 47， 
最 后 x 的 值 即 为 47。 

(2) 新 建 运算 符 Cnew): 一 元 运算 符 ,该 运算 符 可 以 创建 一 个 新 的 自 定义 对 象 或 
JavaScript 内 置 的 对 象 。 例 如 : var studentArray 一 new Array("Jacky","Tom","Lucy"); 
表示 创建 了 一 个 数组 对 象 studentArray, 其 中 元 素 有 “Jacky”Tom” 及 “Lucy”3 个 。 

(3) 删除 运算 符 (Cdelete) : 用 来 删除 对 象 \. 对 象 的 属性 或 指定 的 数组 和 数组 元 素 , 也 可 
以 用 来 删除 一 个 变量 。 如 果 删 除 成 功 , 则 返回 true, 和 否则 返回 false。 

使 用 删除 运算 符 删除 变量 、 对 象 \. 对 象 的 属性 或 指定 的 数组 和 数组 元 素 时 会 有 一 些 限 
制 ,这 些 限制 表现 在 以 下 几 点 。 

Q@ delete 可 以 删除 没有 关键 字 var 定义 的 变量 、 没 有 var 关键 字 定 义 的 对 象 对 象 自 定 
义 的 属性 、 数 组 元 素 ,但 不 能 用 来 删除 有 var 定义 的 变量 对象. 数组 。 

@ 删除 未 定义 的 变量 、 对 象 对 象 的 属性 或 指定 的 数组 元 素 都 会 返回 true。 

@ 删除 后 的 变量 、 对 象 , 数 组 都 不 能 被 访问 。 

@ 被 删除 的 数组 元 素 、 对 象 属性 仍然 可 以 访问 ,只 是 元 素 返 回 值 为 undefined。 

@ 无 论 是 使 用 了 var 关键 字 定义 的 数组 ,还 是 没有 使 用 var 关键 字 定 义 的 数组 ,都 可 以 
使 用 delete 运算 符 删除 其 中 的 元 素 。 

@ 删除 数组 元 素 后 ,数组 的 长 度 不 会 发 生变 化 ,只 是 该 元 素 的 值 被 删除 。 

(4) typeof 运算 符 ; 一 元 运算 符 。 该 运算 符 可 以 返回 一 个 字符 串 ,该 字符 串 用 于 显示 操 
作 数 的 数据 类 型 ,其 操作 数 可 以 是 任意 类 型 的 操作 数 。 例 如 : typeof("Lucy") ,运算 结果 是 
string。 表 9-2 所 示 为 JavaScript 中 typeof 运算 符 应 用 数据 类 型 及 运算 结果 。 

表 9-2 JavaScript 中 typeof 运算 符 应 用 











数据 类 型 运算 结果 
数值 型 number 
对 象 object 
布尔 型 boolean 
字符 型 string 
数组 object 
函数 function 
Null object 
未 定义 undefined 


【 例 9-11】 JavaScript 中 typeof 应 用 。 


<! -- 程序 9- 11. html --> 
<htm]l > 
<head > 
<title> JavaScript 中 typeof 应 用 </title> 
< script type = "text/javascript" language = "javascript" > 


Var mystringl = "123"; 
Var numberobject = new Number( mystring1); 
document. write( typeof (numberobject), "< br >"); 
Var numbervaluel = Number (mystring1); 
document. write(typeof (numbervaluel), "<br>"); 
var mystring2 = "234"; 
Var numbervalue2 = Number (mystring2); 
document. write(numbervalue2, "< br >"); 
var mystring3 = "234 你 好 "; 
var numbervalue3 = Number (mystring3); 
document. write(numbervalue3, "< br >"); 
</script > 

</head> 

<body> 

</body > 

</html > 





在 本 例 中 ,使 用 new 运算 符 调用 Number() 构 造 函 数 所 创建 的 是 一 个 对 象 numberobject， 
没有 使 用 new 运算 符 而 直接 调用 Number( ) 构 造 函 数 所 创建 的 是 一 个 数值 型 变量 
numbervaluel , 当 使 用 Number() 函 数 转换 数字 时 ,如 果 参 数 中 的 数据 可 以 转化 为 数字 , 则 
返回 该 数字 ; 如 果 参 数 中 的 数据 不 能 转化 为 数字 , 则 返回 NaN。 本 例 的 浏览 效果 如 图 9-12 
所 示 。 
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图 9-12 typeof 的 应 用 示例 


9.5 JavaScript 程序 


JavaScript 是 一 种 基于 对 象 和 事件 驱动 并 具有 安全 性 能 的 脚本 语言 .使 用 它 的 目的 是 
与 HTML 超 文本 标记 语言 Java 小 程序 一 起 实现 在 一 个 Web 页 面 中 链接 多 个 对 象 , 与 
Web 客户 交互 作用 ,从 而 可 以 开发 客户 端的 应 用 程序 。 而 要 编写 JavaScript 程序 完成 某 项 
任务 ,就 必须 使 用 语句 与 函数 等 知识 ,要 合理 设计 程序 的 结构 .还 要 了 解 JavaScript 程序 中 
有 哪些 基本 结构 ,一 般 在 程序 中 ,基本 结构 主要 包括 顺序 结构 .选择 结构 和 循环 结构 ,在 本 节 
中 主要 介绍 选择 结构 ,循环 结构 ,而 顺序 结构 比较 简单 , 它 按照 语句 的 先后 顺序 依次 执行 。 
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9.5.1 语句 和 语句 块 
使 用 表达 式 可 以 返回 一 个 值 , 语 句 就 是 在 表达 式 后 加 上 一 个 分 号 。 例 如 : 


和 


JavaScript 中 常见 的 语句 主要 包括 赋值 语句 条件 语句 、 逗 号 语句 .选择 语句 、 循 环 语 
句 、 跳 转 语句 .异常 语句 和 其 他 语句 。 
语句 块 是 一 组 用 大 括号 括 起 来 的 语句 。 例 如 : 


if (a>b){ 
x=0; 
b=b+1; 
x= a 


: 


JavaScript 会 逐 行 执行 语句 块 中 的 所 有 语句 ,除非 遇 到 如 break 语句 、continue 语句 、 
return 语句 ,throw 等 语句 才 会 从 语句 块 中 跳出 ,不 执行 其 后 的 语句 。jJavaScript 对 语句 块 
中 的 语句 多 少 没 有 规定 ,一 个 语句 是 一 个 语句 块 , 多 个 语句 也 是 一 个 语句 块 ,只 要 是 使 用 花 
括号 括 起 来 的 语句 就 是 一 个 语句 块 。 


9.5.2 注释 语句 


类 似 于 HTML 的 注释 ,JavaScript 代码 也 有 注释 语句 ,用 来 对 某 一 段 代码 进行 说 明 , 以 
提高 程序 可 读 性 。 编 写 注释 是 一 种 良好 的 程序 设计 习惯 ,除了 方便 查看 外 ,还 可 以 给 以 后 的 
维护 工作 带 来 方便 。 

JavaScript 中 的 注释 语句 可 以 分 为 两 种 : 单行 注释 和 多 行 注 释 。 单 行 注释 使 用 双 斜 线 
“// "开头 ,其 后 面 同一 行 的 内 容 就 是 注释 的 内 容 ; 多 行 注释 以 “/ x* "标记 开始 ,以 "* /标记 
结束 ,中 间 所 包含 的 内 容 都 为 注释 内 容 。 例 如 : 


< Script> 
// 单 行 注 释 : 定义 一 个 名 为 m 的 变量 ,并 赋值 为 20 
var m= 20; 
/* 多 行 注释 : 定义 一 个 名 为 txt 的 变量 ， 
并 且 其 值 为 
字符 串 "网 页 设计 "* / 
var txt = "网 页 设计 "; 
</script > 


9.5.3 选择 语句 


在 执行 程序 时 ,不 一 定 都 要 按 编写 的 顺序 自 上 而 下 进行 ,很 多 时 候 需要 根据 不 同情 况 ， 
跳 转 执行 相应 的 一 段 程序 块 。 选 择 语 句 是 JavaScript 中 的 一 种 基本 控制 语句 ,可 以 完成 程 
序 不 同 执行 路 线 的 判断 选择 , 它 通过 判断 表达 式 是 否 成 立 来 选择 要 执行 的 语句 。 常 见 的 选 


择 语句 包括 和 语句 和 switch 语句 两 种 。 
1. 证 语句 
在 让 语句 中 ,包括 简单 的 让 语句 \ 单 分 支 的 if…else… 语 句 及 多 分 支 的 让 语句 。 
(1) 简单 语句 的 基本 语法 为 : 


(条 件 ) 
U 
代码 段 


语句 执行 过 程 为 : 先 判 断 条 件 ( 表 达 式 ) , 若 条 件 成 立 , 就 执行 代码 段 ; 否则 ,直接 执行 if 
后 面 的 语句 。 
(2) 单 分 支 if…else… 语 句 的 基本 语法 为 : 


证 (条 件 1){ 
代码 段 1 
有 
else{ 
代码 段 2 
| 


语句 执行 过 程 为 : 先 判 断 条 件 (表达 式 ) , 若 条 件 成 立 , 就 执行 代码 段 1; 否则 ,执行 代码 
段 2。 即 一 定 会 执行 代码 段 1 和 代码 段 2 中 的 一 句 , 且 只 能 执行 其 中 的 一 句 。 需 要 注意 的 
是 ,else 子 句 是 让 f 语 句 的 一 部 分 , 它 不 能 作为 语句 单独 使 用 ,必须 与 if 配对 使 用 。 

(3) 多 分 支 的 这 语句 。 

在 程序 复杂 时 还 可 能 需要 判断 多 个 条 件 表达 式 ,这 将 产生 更 多 的 执行 路 线 , 有 多 个 条 件 
表达 式 的 基本 语法 为 : 


if (条 件 1){ 
代码 段 1 
jelse if( 条 件 2){ 
代码 段 2 
Jelse{ 
代码 段 3 
} 


语句 执行 过 程 为 : 先 判 断 条 件 1( 表 达 式 1) , 若 条 件 1 成 立 ,执行 语句 1 后 ,退出 该 计 结 
构 ; 否则 ,再 判断 条 件 2( 表 达 式 2) , 若 条 件 2 成 立 , 则 执行 语句 2 后 ,退出 该 让 结构; 否则 ， 
再 判断 条 件 3( 表 达 式 3) , 若 条 件 3 成 立 , 则 执行 语句 3 后 ,退出 该 过 结 构 ;…… 

【 例 9-12】 JavaScript 选择 结构 if 语句 应 用 。 

Ea Dm 2 一 之 

< html> 


<head> 
<title> JavaScript 选择 结构 主语 句 应 用 </title> 
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< script type = "text/javascript" language= "javascript" > 
var x= 20; 
if(x<10) { 
document.write("x 小 于 10"); 
| 
else if(x>=10&8&x<=30){ 
document, write("x 介 于 10 与 30 之 间 "); 
1 
else{ 
document.write("x 大 于 30"); 
h 
</script > 
</head> 
<body> 
</body> 
</html > 





在 本 例 中 , 先 判 断 “x 二 10” 表 达 式 是 否 为 真 ,如 果 为 真 , 就 执行 其 后 的 语句 ; 否则 就 不 执 
行 其 后 的 语句 。 再 判断 “x 盖 一 10&&.x< 一 一 30" 表 达 式 是 否 为 真 ,在 本 实例 中 ,该 条 件 为 真 ， 
所 以 执行 其 后 的 语句 “document. write("x 介 于 10 与 30 之 间 ");”。 本 例 的 浏览 效果 如 




















图 9-13 所 示 。 
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图 9-13 让 语句 的 应 用 示例 


2. switch 语句 





根据 所 设立 的 条 件 不 同 ,程序 执行 不 同 的 代码 ,在 网 页 中 可 用 于 判断 不 同情 况 下 网 页 产 


生 的 不 同行 为 。 虽 然 让 语句 可 以 完成 条 件 的 逻辑 控制 ,但 这 并 不 是 最 好 的 编程 方式 ,尤其 














是 当 所 有 选择 结构 都 控制 同一 个 变量 进行 判断 的 时 候 ,每 个 这 语句 分 支 都 要 检测 一 次 变 
量 值 ,这 在 时 间 和 资源 上 都 是 一 种 浪费 。 且 计 语 句 在 判断 条 件 过 多 时 .代码 格式 易 混乱 ， 


使 得 程序 条 理性 很 差 ,JavaScript 针对 这 种 情况 提供 了 更 有 效 的 switchi 
式 为 : 





得 句 。 其 语法 格 


switch( 条 件 表 达 式 ){ 

case 值 1: 代 码 段 1;break; 
case 值 2: 代 码 段 2;break; 
case 值 3: 代 码 段 3;break; 
case 值 4: 代 码 段 4;break; 


default: 代 码 段 n; 
1 


从 语法 格式 上 看 ,switch 语言 相对 于 让 语句 ,更 为 工整 ,条理 清 晰 ,编写 代码 时 也 不 易 
出 错 ,switch 语句 的 执行 过 程 也 不 复杂 ,如 果 条 件 表 达 式 的 结果 为 值 1, 则 程序 将 执行 代码 
段 1,break 代表 其 他 语句 全 部 跳 过 ,以 此 类 推 。 最 后 一 个 default 的 情况 ,类似 于 else, 即 条 
件 表达 式 和 以 上 值 都 不 相等 , 则 执行 代码 段 n。 

【 例 9-13】 JavaScript 选择 结构 switch 语句 应 用 。 








<! -- 程序 9- 13.html --> 
< htm]l > 
<head> 
<title> JavaScript 选择 结构 switch 语句 应 用 </title> 
< script type = "text/javascript" language= "javascript" > 
function myChoice( ) 
Var selectValue = myForm].mySelect. value; 
switch(selectValue) 
{ 
case "Java" : 
alert(" 你 选择 的 是 Java"); 
break; 
case "JavaScript": 
alert(" 你 选择 的 是 JavaScript"); 
break; 
Case "Ct+": 
alert(" 你 选择 的 是 C++"); 
break; 
default: 
alert(" 你 没有 合适 的 选择 !"); 


break; 





} 
上 
</script > 
</head> 
<body> 
< form name = "myForml"> 
<select name = "mySelect"> 
< option value = "Java"> Java </option> 
< option value = "JavaScript"> JavaScript </option> 
<option value = "C++"> CH+</option> 
</select> 
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< input type = "button"” value = "确定 " onclick = "myChoice()"> 
</form> 
</body> 
</html > 


在 本 例 中 ,创建 了 一 个 下 拉 列 表 框 和 一 个 按钮 。 在 下 拉 列 表 框 中 任意 选择 一 个 选项 后 ， 
单 击 * 确 定 ” 按 钮 ,系统 将 会 调用 myChoice() 函数 判断 用 户 在 下 拉 列 表 框 中 的 选择 项 ,本 例 
的 浏览 效果 如 图 9-14 所 示 。 
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图 9-14 switch 语句 的 应 用 示例 


本 程序 中 switch 语句 的 执行 过 程 如 下 。 

(1) 先 获 取 变 量 selectValue 的 值 。 该 值 为 下 拉 列 表 框 中 选中 选项 的 值 ,也 就 是 选中 的 
option 元 素 的 value 值 。 

(2) 假设 选中 字符 串 “JavaScript”, 则 计算 机 自动 会 与 case 后 面 的 常量 配对 ,然后 执行 
其 后 面 的 语句 , 磁 到 break 语句 时 ,结束 整个 switch 语句 。 


9.5.4 人 循环 语句 


在 编写 程序 的 时 候 ,需要 程序 重复 多 次 执行 类 似 的 代码 ,直到 某 个 条 件 成 立 。 
JavaScript 提供 了 各 种 循环 语句 完成 这 项 功能 ,循环 是 程序 高 效率 的 体现 , 善 用 循环 ,代码 
结构 将 得 到 最 大 的 简化 。JavaScript 中 的 循环 语句 包括 while 语句 、do… while 语句 for 语 
句 3 种 。 

1. while 循环 

while 循环 是 一 种 常用 的 循环 ,允许 JavaScript 多 次 执行 同一 个 代码 段 ,一 般 用 于 不 知 
道 循环 次 数 的 情况 下 ,其 语法 格式 为 ， 





while( 条 件 表达 式 ){ 
循环 体 
}; 











while 语句 执行 规则 是 先 判断 后 执行 ,也 就 是 如 果 循 环 条件 为 true, 就 执行 其 后 面 的 循 
环 体 , 和 否则 结束 循环 体 ,执行 后 面 的 语句 。 
【 例 9-14】 while 语句 的 应 用 。 





<! -- 程序 9- 14. html --> 
<html> 
<head> 
<meta http - equiv= "Content - Type" content = "text/html; charset = gb2312" /> 
<title> while 循环 语句 </title> 
< style type = "text/css"> 
body{ text - align:center;} 
</style> 
</head> 
<body> 
<div id= "main"> 
< script type = "text/javascript"> 
var i=1; 
while (i<=10){ 
document.write( "数字" + i+ "< br />"); 
+ 十 
} 
</script> 
</div> 
</body> 
</html > 





本 例 的 作用 是 将 “数字 i" 按 1 一 10 的 顺序 重复 显示 10 《Re ER 天 可 中 
次 ,浏览 效果 如 图 9-15 所 示 , 如 果 本 例 不 使 用 循环 语句 ， | 文人 中 纺 缉 @) 查看 四 收 灾 WW) -> 
完成 本 例 的 效果 是 非常 麻烦 的 。 在 本 例 中 ,使 用 变量 i 作 | 鲍 晤 ”veer 国外 全 
为 计数 器 ,并 且 i 的 初 值 为 1, 循 环 条 件 是 i 必须 小 于 等 于 “| 空 se | 大 m7 
10 ,通过 i 十 十 语句 ,每 次 循环 执行 代码 后 i 都 会 自动 增 1， 
直到 i 的 值 为 11 时 ,循环 才 停 止 。 

在 编写 while 循环 语句 时 ,有 可 能 循环 体内 的 代码 自 
一 次 都 不 会 执行 ,如 本 例 中 i 的 初始 值 设置 为 11 ,程序 将 
直接 跳 过 循环 ,执行 后 面 的 语句 。 

2. do…while 循环 

do…while 循环 和 while 循环 很 类 似 , 只 是 把 条 件 表 
达 式 的 判断 放 在 后 面 ,其 语法 格式 为 ， 9-15 while 语句 的 应 用 



































dof 
循环 体 
}while( 条 件 表达 式 ); 


do…while 循环 语句 执行 规则 是 先 执行 后 判断 ,也 就 是 不 管 循环 条 件 是 否 为 真 ,都 先 执 
行 一 次 循环 体 ,然后 再 进行 条 件 表达 式 的 判断 ,如 果 条 件 为 true, 则 继续 执行 循环 体 ,否则 结 
东 循 环 体 。 所 以 while 的 循环 体 最 少 执行 0 次 .do…while 的 循环 体 最 少 执行 一 次 。 


地 虽 趴 





JavaScript 基础 


Web 前 误 证 计 与 开发 一 一 HTML5 十 CSS3 十 JavaScript 微 课 版 





【 例 9-15】 do…while 循环 的 应 用 。 


<! -- 程序 9- 15. html -一 > 
<html> 
<head> 
<meta http - equiv = "Content - Type”" content = "text/html; charset = gb2312" /> 
<title> do.. .while 循环 语句 </title> 
<style type = "text/css"> 
body{ text - align:center;} 
</style> 
</head> 
<body> 
<div id= "main"> 
< script type = "text/javascript"> 
document. write(" 变 量 i 初始 值 满足 条 件 表达 式 的 情况 :< hr />"); 
var i=1; 
dof 
document.write( "数字" + i+ "< br />"); 
1++》 
}while (i<10); 
document. write(" 变 量 i 初始 值 不 满足 条 件 表达 式 的 情况 :< hr />"); 
var i= 20; 
dof 
document. write(" 数 字 " +i+ "<br />"); 
Eo 
}while (i<10); 
</script> 
</div> 
</body > 
</html > 








本 例 的 浏览 效果 如 图 9-16 所 示 。 在 一 般 的 使 用 中 ,do…while 循环 和 while 循环 没有 
区 别 , 但 由 于 判断 条 件 的 先后 关系 ,在 本 例 的 第 2 个 循环 语句 中 ,即使 条 件 表达 式 的 值 为 
false,do…while 循环 仍然 执行 一 次 循环 体 , 输 出 变量 i 的 初始 值 。 
do. - -while 循环 语句 - Windovs Internet ... 下 器 | 几 
文件 外 ” 闹 辑 E) 查看 WW) 收 若 天 4) 工具 C) 有 EET 
GO Ex 入 
帘 收 蕊 交感 4 wiile 稀 十 沽 问 。 | 侩 -6 














数字 9 
变量 i 初始 值 不 满足 条 件 表达 式 的 情况 : 
数字 20 
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图 9-16 ”do…while 循环 的 应 用 示例 


专家 点 拨 : 由 于 do…while 循环 至 少 执行 一 次 代码 ,因此 在 大 多 数 应 用 中 ,while 循环 
更 为 常用 。 

3. for 循环 

JavaScript 中 的 for 循环 语句 有 比较 完整 的 循环 结构 ,相对 来 说 比 while 循环 更 为 方 
便 , 结 构 更 清晰 ,类 似 于 while 循环 ,for 循环 有 一 个 初始 化 的 变量 作为 计数 器 ,每 循环 一 
次 计数 器 自动 增 1( 或 自动 减 1) ,并 设立 一 个 终止 循环 的 条 件 表达 式 。for 语句 的 语法 格 
式 为 : 


for( 表 达 式 1; 表达 式 2; 表达 式 3){ 
循环 体 
} 


语法 格式 中 的 表达 式 1 用 于 循环 变量 的 初始 化 ; 表达 式 2 用 于 循环 条 件 的 判断 ,表达 
式 3 用 于 循环 变量 的 更 新 。 当 表达 式 2 默认 不 写 时 ,系统 默认 循环 条 件 永远 为 true, 此 时 ， 
一 般 通过 选择 语句 和 break 语句 结束 循环 ,否则 程序 会 进入 死 循环 。 

【 例 9-16】 for 语句 的 应 用 。 


<! -- 程序 9- 16.html --> 
<html> 
<head> 
<title> JavaScript 循环 结构 for 语句 应 用 </title> 
< script type = "text/javascript" language = "javascript" > 
var i; 
var sum= 0; 
for(i=0;i<=50;i++) 
sum+= 1; 
document. write("1 到 50 数字 之 和 为 :" + sum); 
</script > 
</head> 
<body> 
</body> 
</html > 





在 本 例 中 , 先 对 循环 变量 i 赋 初 值 1, 然 后 对 循环 条 件 i 过 = 50 进行 判断 , 当 循环 条 件 为 
真 就 执行 其 后 的 循环 体 , 循 环 体 总 共 执 行 了 50 次 ,最 后 把 1 一 50 数字 的 和 输出 。 浏 览 后 的 
效果 如 图 9-17 所 示 。 

4。. for…in 循环 

在 一 般 的 网 页 应 用 中 ,一 个 计数 器 变量 即 可 满足 需求 ,JavaScript 还 有 另 一 种 形式 的 
for 循环 , 即 for…in 循环 .用 于 循环 处 理 JavaScript 对 象 .如 对 象 的 属性 等 。 关 于 对 象 的 概 
念 会 在 9. 6 节 中 讲解 。for…in 循环 的 语法 格式 为 : 





for( 声 明 变量 in 对 象 ){ 
循环 体 
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其 中 ,声明 的 变量 用 于 存储 循环 运行 时 对 象 中 的 下 一 个 元 素 ,for…in 循环 的 执行 过 程 即 对 
象 中 每 一 个 元 素 执行 循环 体 中 的 语句 。 由 于 每 个 对 象 的 属性 不 同 , 因 此 循环 的 次 数 是 未 知 
的 , 且 循环 的 顺序 也 是 未 知 的 。 


沼 JavaScript 箱 环 结构 for 语 句 应 用 - Microsoft Internet Explorer 轩 问 加 
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图 9-17 for 语句 的 应 用 示例 


【 例 9-17】 for…in 语句 的 应 用 。 


<! -- 程序 9- 17.html --> 
< htm]l > 
<head > 
<meta http - equiv = "Content ~ Type" content = "text/html; charset = gb2312" /> 
<title> forin 循环 语句 </title> 
< style type = "text/css"> 
body{ text - align:center;} 
</style> 
</head> 
<body> 
<div id= "main"> 
< script type = "text/javascript"> 
var ballArray = new Brray(" 篮 球 ", "足球 ", "网 球 ", "乒乓 球 ", "棒球 ", "排球 "); 
for(var ball in ballArray){ 
if (ballArray[ball] == "篮球 "){ 
document. write(ballArray[ball] + " -——-—-—-—— i love this game <br />"); 
Jelse{ 
document. write( ballArray[ball] + "< br />"); 
) 
</script > 
</div> 
</body> 
</html > 





数组 是 一 种 特殊 的 对 象 类 型 ,可 以 存储 多 个 数据 ,类 似 于 多 个 变量 的 集合 ,并 通过 索引 
访问 。 本 例 是 以 数组 为 例 ,展示 for…in 循环 的 应 用 。 本 例 的 浏览 效果 如 图 9-18 所 示 。 
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9-18 for…in 循环 的 应 用 示例 


9.6 项 数 


在 编写 程序 时 ,为 了 方便 日 后 的 维护 ,以 及 让 程序 更 好 地 结构 化 ,通常 都 会 把 一 些 重复 
使 用 的 代码 独立 出 来 ,这 种 独立 出 来 的 代码 块 就 是 函数 。 函 数 是 独立 于 主 程序 而 存在 的 、 拥 
有 特定 功能 的 程序 代码 块 ,并 且 这 个 代码 块 可 以 在 主 程序 或 其 他 函数 中 根据 需要 而 被 调用 。 
如 果 将 代码 块 独立 成 为 函数 ,可 以 让 日 后 的 维护 变 得 方便 和 简洁 。 


9.6.1 函数 的 定义 和 使 用 


函数 分 系统 函数 和 用 户 自 定义 函数 两 种 ,如 果 一 个 函数 是 JavaScript 内 置 的 函数 ,就 称 
为 系统 函数 ; 如 果 一 个 函数 是 程序 员 自 己 编写 的 函数 ,就 称 为 自 定义 函数 。 

1. 定义 函数 

在 JavaScript 中 ,函数 既是 常见 的 数据 类 型 ,也 是 对 象 。 可 使 用 function 语句 定义 函数 ,也 
可 使 用 Function() 构 造 函数 来 定义 函数 ,甚至 还 可 以 在 表达 式 中 直接 定义 和 使 用 函数 。 

使 用 function 语句 来 定义 一 个 函数 的 语法 代码 为 : 

function 函数 名 (参数 1, 参数 2…){ 

< 语句 块 > 


return 返回 值 ; 
} 


使 用 Function() 构 造 函数 来 定义 函数 的 语法 代码 为 : 
var 函数 名 = new Function(" 参 数 1"，" 参 数 2"，" 参 数 3"… ," 函数 体 "); 
【 例 9-18】 JavaScript 函数 应 用 。 


<! -- 程序 9- 18. html --> 
<html> 
<head> 
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<title> JavaScript 函数 应 用 </title> 
< script type = "text/javascript" language = "javascript" > 
var X= 20,y= 22; 
function sum(){ 
return x+y; 


document. write(sum(),"<br>"); 





Var mysum = new 


Function("x","y", "var resum = x+ y;return resum;"); 视频 讲解 
document. write(mysum(x, y)); 
</script > 
</head> 
<body> 
</body> 
</html > 


在 本 例 中 ,采用 了 两 种 方法 来 创建 函数 ,一 种 是 使 用 gg er | 
function 语句 形式 , 另 一 种 是 使 用 Function( ) 构 造 函 数 定 | 文件 久久 加 可 看 WW 中 克 天 QW) 工 
义 函 数 , 最 后 输出 函数 的 属性 值 。 浏览 结果 如 图 9-19 | 人 @ 辐 ”vesriswm 国 [x 
所 示 。 实 收 玉 天 | 古 TwSSRESR 用 | | 

2. 函数 的 使 用 和 2 

函数 能 简化 代码 ,将 程序 划分 为 多 个 独立 的 功能 模 
块 ,并 且 可 代码 复 用 (类 似 于 CSS)。JavaScript 还 提供 了 
大 量 内 置 的 函数 可 以 直接 调用 ,如 前 面 例题 中 用 过 的 图 9-19 ”函数 的 应 用 示例 
write() 方 法 ,本 身 就 是 一 个 内 置 的 函数 ,而 write() 括 号 
中 的 字符 串 即 传递 的 参数 。JavaScript 内 置 函数 非常 多 ,以 下 实例 展示 部 分 JavaScript 的 
函数 。 

【 例 9-19】 JavaScript 内 置 函数 的 使 用 。 














<! -- 程序 9- 19. html --> 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> JavaScript 内 置 数学 函数 演示 </title> 
< style type = "text/css"> 
body{ text - align:center;} 
井 content{ width:200px; 
height:100px; 
position:absolute; 





left :0px; 
top: Opx; 
background: 井 eeez 
</style> 
</head> 
<body > 


<div id= "main"> 


< script type = "text/javascript"> 
document. write("100 和 200 之 间 较 大 的 数 是 : " + Math. max(100,200)); 
document. write("<br />100 和 200 之 间 较 小 的 数 是 : " + Math. min(100, 200)); 
document. write("<br />0~1 之 间 取 随机 数值 是 : " + Math. random(100)); 
document. write("< br /> 0~100 之 间 取 随机 数值 是 : " + Math. random(100) * 100) ; 
document. write("< br /> 您 的 浏览 器 类 型 是 : " + window. navigator.appName); 

</script> 

<button onclick = "window. close( );"> 关 闭 本 窗口 </button> 

</div> 
</body > 
</html > 


本 例 的 浏览 效果 如 图 9-20 所 示 , 从 本 例 可 见 , 只 要 合理 使 用 JavaScript 的 内 置 函数 ,就 
可 以 编写 很 多 动态 功能 ,HTML 网 页 不 再 是 静止 的 文档 了 。 
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100 和 200 之 间 较 大 的 数 是 ，200 


100 和 200 之 间 较 小 的 数 是 ，100 
0 一 1 之 间 取 随机 数值 是 ，0. 757553627834805 
0 一 100 之 间 取 随机 数值 是 ，47. 81252285674079 
您 的 浏览 器 类 型 是 ,Jlicrosoft Internet Explorer 
关 用 本 窗口 ] 








图 9-20 JavaScript 的 内 置 函数 示例 


9.6.2 函数 的 参数 传递 


众多 的 JavaScript 内 置 函 数 在 使 用 时 ,几乎 都 需要 传递 参数 。 如 window 对 象 的 alert() 方 
法 ,confirm( ) 方 法 等 ,函数 将 根据 不 同 的 参数 通过 相同 的 代码 处 理 , 得 到 设计 者 所 期 望 的 功 
能 。 而 自 定义 函数 同样 可 以 传递 参数 ,并 且 个 数 不 限 ,定义 函数 时 所 声明 的 参数 称 为 形式 参 
数 。 形 式 参数 在 函数 体内 参与 代码 的 运算 ,而 实际 调用 函数 时 须 传递 相应 的 数据 给 形式 参 
数 , 这 些 数 据 称 为 实际 参数 。 

【 例 9-20】 自 定义 函数 的 参数 传递 。 


<! -- 程序 9- 20. htm] 一 一 > 
< html > 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 自 定义 函数 参数 传递 </title> 
< script type = "text/javascript"> 
function math(x, y){ 
Z=xX+yx2; 
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</script> 
<style type = "text/css"> 
body{ text - align:center;} 
</style> 
</head> 
<body> 
<div id= "main"> 





< script type = "text/javascript"> 
Var 2Z; 
math(12,5); 
document. write("12+5*2 的 结果 是 : " +2z); 

</script> 

</div> 
</body> 
</html > 





本 例 的 浏览 效果 如 图 9-21 所 示 。 
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图 9-21 自 定义 函数 参数 传递 


本 例 中 ,函数 定义 部 分 的 x 和 y 为 形式 参数 ,而 调用 函数 括号 中 的 12 是 第 1 个 实际 参 
数 , 对 应 形式 参数 x, 括 号 中 的 5 是 第 2 个 实际 参数 ,对 应 形式 参数 y。 形 式 参 数 就 像 一 个 变 
量 , 当 调用 函数 时 ,实际 参数 赋值 给 形式 参数 ,并 参与 实际 运算 。 不 过 在 定义 函数 时 ,形式 参 
数 只 是 代表 了 实际 参数 的 位 置 和 类 型 ,系统 并 未 为 其 分 配 内 存 存储 空间 。 


9.6.3 函数 的 作用 域 和 返回 值 


变量 的 作用 域 即 变量 在 多 大 的 范围 是 有 效 的 ,在 主 程序 (函数 外 部 ) 中 声明 的 变量 称 为 
全 局 变量 。 其 作用 域 为 整个 HTML 文档 。 在 函数 体内 部 用 var 声明 的 变量 为 函数 局 部 变 
量 , 只 有 在 其 直属 的 函数 体内 才 有 效 ,在 函数 体外 该 变量 没有 任何 意义 。 

【 例 9-21】 变量 的 作用 域 。 





<! -- 程序 9- 21. html --> 
<html > 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 变 量 的 作用 域 </title> 
< script type = "text/javascript"> 


function funVar(){ 
var txt= "函数 内 部 的 局 部 变量 "; 
document. write(" 这 是 " + txt); 
document. write("< br > 这 是 " + txt2); 
} 
</script> 
</head> 
<body> 
<div id= "main"> 
< script type = "text/javascript"> 
var txt= "函数 外 部 的 全 局 变量 "; 
var txt2= "另外 一 个 全 局 变量 "; 
funVar(); 
document. write("<hr> 这 是 " + txt); 
</script> 
</div> 
</body> 
</html > 








本 例 的 浏览 效果 如 图 9-22 所 示 。 
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这 是 函数 内 部 的 局 部 变量 


这 是 另外 一 个 全 局 变量 
这 是 函数 外 部 的 全 局 变量 
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图 9-22 变量 的 作用 域 示例 


本 例 中 ,在 函数 内 部 声明 和 全 局 变量 同名 的 变量 ,函数 内 部 优先 使 用 局 部 变量 (同一 函 
数 体 中 )。 即 同名 的 局 部 变量 和 全 局 变量 只 是 标识 符 相 同 , 其 分 配 的 存储 空间 不 同 (小 房间 
不 同 ), 所 以 可 以 存储 不 同 数据 。 函 数 不 仅 可 以 执行 代码 段 ,其 本 身 还 将 返回 一 个 值 给 调用 
的 程序 ,类 似 于 表达 式 的 计算 。 

函数 返回 值 须 使 用 return 语句 ,该 语句 将 终止 函数 的 执行 ,并 返回 指定 表达 式 的 值 。 
其 实 所 有 的 函数 都 有 返回 值 , 当 函数 体内 没有 return 语句 时 ,JavaScript 解释 器 将 在 末尾 添 
加 一 条 return 语句 ,返回 值 为 undefined。 一 般 情况 下 ,要 获得 函数 的 返回 值 ,通常 有 以 下 几 
种 方法 。 

(1) 将 函数 的 返回 值 赋 给 变量 ,数组 元 素 或 对 象 属性 。 

(2) 将 函数 的 返回 值 作为 数据 在 表达 式 中 进行 运算 。 

(3) 将 函数 的 返回 值 输出 。 
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【 例 9-22】 函数 返回 值 的 应 用 。 


<! -- 程序 9- 22. html --> 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 函 数 返 回 值 </title> 
< script type = "text/javascript"> 
function funReturn(){ 
var a= 100; 
Var b= Math. sqrt(a); 
return b/2+a; 
} 
function funReturn2(){ 
var a= 100; 
var b= Math. sgqrt(a); 
var c=b/2+a; 





lt 
</script > 
</head> 
<body> 
<div id= "main"> 
< script type = "text/javascript"> 
document. write(" 第 1 个 函数 的 返回 值 为 : " + funReturn()); 
document. write("< hr /> 第 2 个 函数 的 返回 值 为 : " + funReturn2()); 
</script> 
</div> 
</body> 
</html > 





本 例 的 浏览 效果 如 图 9-23 所 示 。 
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第 1 个 函数 的 返回 值 为 ，105 
第 2 个 函数 的 返回 值 为 ，undefined 
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图 9-23 函数 返回 值 的 应 用 示例 


本 例 的 两 个 函数 中 ,第 1 个 函数 采用 “return b/2 十 a; ”语句 ,得 到 了 一 个 返回 值 .而 第 2 
个 函数 没有 写 返 回 语句 ,JavaScript 的 解释 器 在 末尾 自动 添加 一 条 return 语句 , 故 返 回 值 为 


undefined。 


9.7 上 机 练习 与 指导 


9.7.1 和 狂 数 游戏 


本 节 主 要 练习 HTML 文件 中 编写 JavaScript 程序 的 基本 操作 ,熟练 掌握 JavaScript 中 
if 条 件 语 句 。 程 序 的 效果 如 图 9-24 所 示 。 





文件 四 ”编辑 四 ”查看 WW 收 襄 天 有) 工具 名 
”nenal 国 5x 入: 
帘 收 茂 天 | 大 枯 有 ls 











请 输入 一 个 《0"99) 之 间 的 整数 ， 三] [而 ] 
信息 : | 




















图 9-24 猜 数 游戏 效果 图 


参考 代码 为 ; 
<! 一 上 机 练习 9-1.html --> 
<html > 
<head> 
<title> 狂 数 游戏 </title> 


< script language = "javascript"> 
n= Math. floor(Math. random() * 100); 
function numGame( ){ 
num = forml. num. value; 
SE 
s= "你 输入 的 数字 "; 
if(num<0||num>99){ 
str= s+" 超 过 了 0~99 的 范围 "; 
1 
else{ 
if(num>n) str=s+" 太 大 了 "; 
if(num<n) str=s+" 太 小 了 "; 
if(num== n){ 


str=" 蔡 喜 你 猜 对 了 !"; 


alert(str); 
: 
} 
forml. info. value = str; 
</script> 
</head> 
<body> 
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< form name = "forml"> 
请 输入 一 个 (0~99) 之 间 的 整数 : 
<input type= "text" name= "num" size= "3"> 
< input type= "button" value= "我 猜 " onclick = "numGame()"> 
<br> 
信息 : < input type = "text" name = "info" size= "40"> 

</form> 

</body> 
</html > 


9.7.2 数组 应 用 


本 节 练 习 如 何 用 JavaScript 语句 创建 数组 ,要 求 熟练 地 使 用 数组 的 常见 函数 sort() 和 
join()。 本 程序 的 效果 如 图 9-25 所 示 。 


数组 的 应 用 - Windows In... [| 器 | 区 | 
文件 编 邵 @) 查看 W) 收藏 允 Q) 上 











刁 :上 机 练习 9-2.html 图 | 好 jx| 








Example: 数 组 的 应 用 


jacky, lily, lucy 
jacky:lily:lucy 
0, 120, 200, 38, 75 
0, 38, 75, 120, 200 








是 我 的 电脑 


图 9-25 数组 应 用 效果 图 


<! 一 上 机 练习 9-2.html --> 
<html> 
<head> 
<title> 数 组 的 应 用 </title> 
</head> 
<h3>Example: 数 组 的 应 用 </h3 > 
<pre> 
<script language = " javascript"> 
var studentArray = new Array("jacky", "lily", "lucy"); 
document. writeln(studentArray. join()); 
document. writeln(studentArray. join(";")); 
var numberArray = new Array(200, 120,75, 38,0); 
document. writeln(numberArray. sort()); 
document. writeln(numberArray. sort(function(x, y){return x— y;})); 
</script> 
</pre> 
</body> 
</html> 








9.8 本 章 习 题 

一 、 选 择 题 
1. 显示 语句 “nice to meet youl” 的 JavaScript 语法 是 ( Ys 

A. document. write( "nice to meet you!"); 

B. "nice to meet you!" 

C. "nice to meet you!"; 

D. response. write("nice to meet you!"); 
2. 定义 JavaScript 数组 的 正确 方法 是 ( i 

A. var array 一 new Array"lily","lucy","yoyo"; 

B. var array 一 new Array(l: "lily",2: "lucy",3: "yoyo"); 

C. var array 一 new Array("lily", "lucy","yoyo"); 

D. var array=new Array:1l=("lily")2= ("lucy")3= ("yoyo") 
3. 一 般 在 下 面 ( )HTML 元 素 中 放置 JavaScript 代码 。 

A. < script> B. <javascript > CGC <js> D. < scripting > 
4. JavaScript 特性 不 包括 ( Ks 

A. 解释 性 B. 用 于 客户 端 C. 基于 对 象 D. 面向 对 象 
5. 下 列 JavaScript 判断 语句 中 正确 的 是 ( ye 

A, if{G==1) B. if(i=1) C. ifi==1then D. ifi=]1 then 
6. 下 列 JavaScript 的 循环 语句 中 正确 的 是 ( Ds 





A. for(i=1;i<=10) 
C. fori=1 to 10 


7. 有 以 下 一 段 程序 片段 : 


var al = 10; var a2 = 20; 
alert("al +a2="+al+a2); 


执行 后 的 结果 为 ( ) 。 


A. al 十 a2 一 30 B. al 十 a2 王 1020 
、 填空 题 
到 1 在 编程 语言 中 ， 程序 的 结构 有 


2 


_ 语句 是 作为 一 种 分 支 选 择 的 结构 语句 ， 它 柯 以 在 多 条 语句 中 进 


B Hoi 一 Ti 一 109i 十 十 》 
D. 证 (过 = 王 109 十 十 ) 


C. al 十 a2 一 al 十 a2 D. "al 十 a2 一 "30 


行 判断 , 符 


合 条 件 就 执行 条 件 后 面 的 语句 ,否则 程序 会 继续 往 下 执行 。 


3. JavaScript 中 的 注释 语句 中 ,单行 注释 使 用 


4. 定义 函数 时 所 声明 的 参数 称 为 _ 
为 
5. JavaScript 中 的 


| = 开关 。 
。 而 实际 调用 函数 时 须 传 递 相应 的 数据 , 称 


循环 ,用 于 循环 处 理 JavaScript 对 象 。 
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第 10 章 JavaScript 核心 对 象 


JavaScript 是 基于 对 象 的 脚本 编程 语言 , 它 的 输入 、 输 出 都 是 通过 对 象 来 完成 的 ， 
JavaScript 提供 了 多 种 对 象 以 供 程 序 使 用 ,包括 内 置 对 象 .浏览 器 对 象 及 文档 对 象 , 本 章 主 
要 学 习 JavaScript 的 一 些 核心 对 象 ,有 了 这 些 对 象 的 帮助 ,在 处 理 问题 时 将 轻松 很 多 。 

本 章 主要 内 容 如 下 。 

。 认识 JavaScript 对 象 。 

。 JavaScript 内 置 对 象 。 

。 浏览 器 对 象 模型 。 

。 文档 对 象 模型 。 





10.1 认识 JavaScript 对 象 


前 面 讲 到 ,JavaScript 是 一 种 基于 对 象 和 事件 驱动 的 脚本 语言 ,这 里 说 JavaScript 是 “ 基 
于 ”对 象 的 语言 ,而 不 说 是 “面向 ”对 象 的 语言 ,原因 在 于 JavaScript 没有 提供 抽象 继承、 重 
载 等 有 关 面 向 对 象 语言 的 相关 功能 ,而 是 把 其 他 语言 所 创建 的 复杂 对 象 统一 起 来 ,从 而 形成 
一 个 非常 强大 的 对 象 系统 。 虽 然 JavaScript 语言 是 基于 对 象 的 ,但 它 还 是 具有 一 些 面向 对 
象 的 基本 特征 ,可 以 根据 需要 创建 自己 的 对 象 ,从 而 进一步 扩大 JavaScript 的 应 用 范围 , 增 
强 编写 功能 。 


10.1.1 JavaScript 对 条 简介 


JavaScript 的 基于 对 象 ,使 网 页 设计 者 有 能 力 定 义 自己 的 对 象 和 变量 类 型 ,同时 ， 
JavaScript 自身 也 提供 了 大 量 的 对 象 。 

对 象 在 JavaScript 中 是 一 种 特殊 的 数据 ,每 个 对 象 都 有 自己 的 属性 ,方法 和 事件 ,属性 
是 反映 该 对 象 的 某 些 特征 ,如 字符 串 的 长 度 、. 图 像 的 宽度 ,文字 框 中 的 文字 等 ; 方法 则 反映 
该 对 象 可 以 完成 的 一 些 功能 ,如 表单 的 “提交 ”窗口 的 “滚动 等; 而 对 象 的 事件 则 是 指 能 响 
应 发 生 在 对 象 上 的 事情 ,如 提交 表单 产生 的 “提交 事件 ”, 单 击 链接 产生 的 “ 单 击 事件 "等 ,但 
并 不 是 所 有 的 对 象 都 具有 以 上 3 个 性 质 的 ,有 些 可 能 没有 事件 ,有 些 可 能 只 有 属性 ,要 根据 
具体 的 对 象 而 定 。 

引用 对 象 的 任何 一 种 “性 质 ” ,都 是 使 用 "对 象 名 . 性 质 名 ”的 格式 ,如 对 于 字符 串 变量 ,可 
以 使 用 length 属性 取得 它 的 长 度 , 其 书写 方式 如 下 : 

















var txt = "Welcome to China!" 
document. write(txt. length); 


同时 对 象 在 JavaScript 中 也 是 一 种 特殊 的 数据 类 型 , 它 将 多 个 数据 集中 在 一 个 内 存单 
元 中 ,运行 时 可 以 使 用 相应 的 名 称 来 存 取 这 些 值 ,存储 在 对 象 中 的 值 可 以 是 数值 和 字符 串 ， 
也 可 以 是 对 象 。 


10.1.2 JavaScript 对 象 的 分 类 


根据 对 象 的 作用 范围 ,JavaScript 主要 提供 了 两 大 类 对 象 。 

(1) 基本 内 置 对 象 : 内 置 对 象 简单 来 说 就 是 JavaScript 定义 的 类 ,主要 包括 数组 对 象 
(Array) 、 逻辑 对 象 (Boolean) .日 期 对 象 (Date) .数学 对 象 (Math) .数值 对 象 (Number) 、 字 
符 串 对 象 (String) .正则 表达 式 对 象 (RegExp) 等 。 

(2) 宿主 对 象 : 指 浏览 器 对 象 模型 (BOM) 和 文档 对 象 模型 (DOM) 中 的 对 象 ,其 中 
BOM 包括 Window 对 象 、Navigator 对 象 、Screen 对 象 、History 对 象 、Location 对 象 等 。 
DOM 则 包括 Document 对 象 .Anchor 对 象 、. Area 对 象 .Base 对 象 .Body 对 象 .Button 对 象 、 
Form 对 象 .Frame 对 象 .Image 对 象 、.Object 对 象 、.Option 对 象 .Select 对 象 、Table 对 象 、 
Textarea 对 象 等 。 

这 些 对 象 描述 了 与 在 Web 浏览 器 运行 JavaScript 相关 的 信息 ,其 中 许多 对 象 之 间 通 过 
属性 值 的 形式 互相 交织 在 一 起 ,例如 ,为 了 访问 文档 中 的 图 像 , 需 要 使 用 document. images 
数组 ,而 该 数组 的 每 一 个 元 素 都 是 一 个 image 对象 。 

由 于 JavaScript 对 象 类 型 过 多 ,鉴于 篇 幅 所 限 ,本 章 主 要 介绍 几 个 常用 的 核心 对 象 ,其 
他 对 象 读者 可 参考 相关 资料 。 














10.2 内 置 对 象 


JavaScript 提供 了 一 些 非常 有 用 的 常用 内 置 对象 供 程序 使 用 ,如 与 系统 日 期 有 关 的 操 
作 可 使 用 日 期 对 象 ,而 与 字符 有 关 的 操作 可 使 用 字符 串 对 象 , 这 些 功能 用 户 不 需要 用 脚本 来 
实现 ,这 也 正 是 基于 对 象 编程 的 真正 目的 。 


10.2.1 字符 串 对 象 


字符 串 在 程序 中 使 用 非常 普遍 , 它 有 两 种 形式 , 即 基本 数据 类 型 和 对 象 实例 形式 ,对 象 
实例 形式 即 String 对 象 实例 。 声 明 一 个 字符 串 对 象 最 简单 、 常 用 的 方法 就 是 直接 赋值 ,也 
可 以 采用 对 象 实例 的 形式 ,创建 这 两 种 形式 的 字符 串 对 象 的 方法 如 下 : 


var strl = "Hello World!"; 
Var str2 = new String("Hello World!"); 


当 String() 和 运算 符 new 一 起 作为 构造 函数 使 用 时 , 它 返 回 一 个 新 创建 的 String 对 
象 ,存放 的 是 字符 串 s 或 s 的 字符 串 表 示 。 
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1. String 对 象 的 属性 

字符 串 对 象 的 属性 只 有 两 个 ,第 一 个 是 length 属性 ,用 于 获取 对 象 中 字符 的 个 数 ,返回 
一 个 整 型 值 。 第 二 个 属性 是 prototype, 这 个 属性 几乎 每 个 对 象 都 有 ,用 于 扩展 对 象 的 属性 
和 方法 ,在 一 般 的 网 页 编程 中 ,该 属性 的 使 用 机 会 不 是 很 多 。 

【 例 10-1】 String 对 象 属性 的 应 用 。 











<! -- 程序 10-1.html --> 
<html > 
<head > 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 字 符 串 对 象 的 属性 </title> 
< script type = "text/javascript"> 
function len(){ 
var str = document. getElementById("str"). value; 
document. getElementById("lennum").value = str. length; 
</script> 
< style type = "text/css"> 
body{text - align:center;} 
</style> 
</head> 
<body> 
<input type = "text" id = "str" value="" /><br /> 
<button onclick = "len();"> 计 算 字 符 数量 </button>< br /> 
< input type = "text" id= "lennum" disabled = "disabled" /> 
</body> 
</html > 





本 例 很 简单 单 击 按钮 执行 len( 函数 ,函数 内 将 第 一 个 文本 控件 的 value 值 转换 为 字 
符 串 对 象 实例 str, 再 通过 str. length 的 属性 获取 字符 的 数量 ,然后 赋 给 第 二 个 文本 控件 的 
value 值 以 显示 结果 ,浏览 效果 如 图 10-1 所 示 。 





友 字符 束 对 象 的 属性 - Windo-.- 攻 | 癌 | 区 ] 
文件 中 编辑 到 ) 查看 WW) 收藏 严 人 ) 工具 ” 








站 -tio\ 程 序 10-1.htnl 国 ||5+|| xx| [4 
和 字符 对 归 的 性 | 

















Hello World! 























10-1 String 对 象 属性 的 应 用 示例 


2. String 对 象 的 方法 
String 类 定义 了 大 量 操作 字符 串 的 方法 ,主要 用 于 有 关 字 符 串 在 Web 页 面 中 的 显示 、 
字体 大 小 .字体 颜色 .字符 的 搜索 及 字符 的 大 小 写 转 换 等 。 常 用 的 操作 方法 如 表 10-1 所 示 。 


表 10-1 String 对 象 的 常用 方法 





河 . 痰 描 述 
anchor() 创建 HTML 锚 , 即 创建 一 个 像 HTML 文档 中 一 样 的 anchor 标记 
big() 用 大 号 字体 显示 字符 串 
blink() 显示 闪 动 字符 串 
bold() 使 用 粗 体 显示 字符 串 
charAt() 返回 在 指定 位 置 的 字符 
charCodeAt() 返回 在 指定 的 位 置 的 字符 的 Unicode 编码 
concat() 连接 字符 串 
fixed() 以 打字 机 文本 显示 字符 串 
fontcolor() 使 用 指定 的 颜色 来 显示 字符 串 
fontsize() 使 用 指定 的 尺寸 来 显示 字符 串 


fromCharCode() 
indexOf() 
italics() 
lastIndexOf() 
link() 
localeCompare() 
match() 
replace() 
search() 

slice() 

small() 

split() 

strike() 

sub() 

substr() 
substring() 
sup() 
toLocaleLowerCase() 
toLocaleUpperCase() 
toLowerCase() 
toUpperCase() 
toSource() 
toString() 
valueOf() 


从 字符 编码 创建 一 个 字符 串 

检索 字符 串 ,返回 某 个 指定 的 字符 串 值 在 字符 串 中 首次 出 现 的 位 置 
使 用 斜体 显示 字符 串 

从 后 向 前 搜索 字符 串 

将 字符 串 显示 为 链接 

用 本 地 特定 的 顺序 来 比较 两 个 字符 串 

在 字符 串 内 检索 指定 的 值 ,或 找到 一 个 或 多 个 正则 表达 式 的 匹配 ,返回 指定 的 值 
蔡 换 与 正则 表达 式 匹 配 的 子 串 

检索 与 正则 表达 式 相 匹配 的 值 

提取 字符 串 的 片段 ,并 在 新 的 字符 串 中 返回 被 提取 的 部 分 
使 用 小 字号 来 显示 字符 串 

把 字符 串 分 割 为 字符 串 数组 

使 用 删除 线 来 显示 字符 串 

把 字符 串 显示 为 下 标 

从 起 始 索 引号 提取 字符 串 中 指定 数目 的 字符 

提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 

把 字符 串 显示 为 上 标 

把 字符 串 转换 为 小 写 

把 字符 串 转换 为 大 写 

把 字符 串 转换 为 小 写 

把 字符 串 转换 为 大 写 

代表 对 象 的 源 代码 

返回 字符 串 

返回 某 个 字符 串 对 象 的 原始 值 





【 例 10-2】 String 对 象 操作 方法 的 应 用 。 


<! -- 程序 10 - 2. html --> 


<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 字 符 串 对 象 的 操作 方法 </title> 第 
< script type = "text/javascript"> 
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Var txt = 
document. 
document. 
document. 
document. 


"Hello World!" 

write("<p> 粗 体 : " + txt. bold() + "</p>") 
write("<p> 斜 体 : " + txt. italics() + "</p>") 
write("<p> 小 写 显 示 : ”+ txt. toLowerCase() + "</p>") 
write("<p> 大 写 显 示 : ”+ txt. toUpperCase() + "</p>") 


document.write("<p> 显 示 链 接 : " + txt. link("http://www.w3school. com.cn") + "</p>") 


document 
document 
document 
document. 
document. 
document. 
</script> 

</head> 

<body > 

</body> 

</html > 


.write("<p> 显 示 为 上 标 : ”+ txt. sup() + "</p>") 
.write("<p> 查 找 Hello 的 位 置 : ”+ txt. indexof("Hello") + "</p>") 
.write("<p> 查 找 world 的 位 置 : ”+ txt. indexOf("world") + "</p>") 


write("<p> 查 找 world: " + txt.match("world") + "</p>") 
write("<p> 查 找 World: ”+ txt.match("World") + "</p>") 
write("<p> 将 World 替换 为 China: "+ txt. replace( /World/, "China")) 





本 例 将 字符 串 "Hello World!1” 用 各 种 方法 做 了 不 同 的 显示 ,浏览 效果 如 图 10-2 所 示 ， 
读者 可 根据 最 后 的 效果 观察 各 方法 的 作用 。 


10.2.2 数组 对 象 


字符 来 对 象 的 操作 方法 -Windows. .. [- | 口 | 区 | 


文件 EF) 编辑 EE) 查看 WW) 收藏 夹 ) 工具 CD) 大 ” 
SO | 加 :tio\ 程 序 10-2.htnl 国 ||s+ x| 坊 5v 


安 收 总 交 | 大 字符 对 旬 的 换 作 方法 | | 区 “ 











粗 体 ，Hello World! 
斜体 ， fello World! 
小 写 显示 hello world! 
大 写 显示 HELLO WORLD! 
显示 链接 : Hello World! 
显示 为 上 标 ， :1 reraal 
查找 Hel1o 的 位 置 ，0 
查找 wor1d 的 位 置 ，-1 
查找 world: null 

查找 World: World 

将 World 替 换 为 China，Hello Chinal 





是 我 的 电脑 了 只 100% ” .: 





图 10-2 字符 串 对 象 方法 应 用 示例 


在 大 多 数 的 编程 语言 中 都 有 数组 类 型 ,在 JavaScript 中 数组 是 一 种 特殊 的 对 象 。 一 般 
的 对 象 是 包含 多 个 已 命名 数据 值 的 复合 数据 类 型 ,而 数组 是 包含 多 个 已 编码 数据 值 的 复合 


数据 类 型 。 

1. 创建 数组 

数组 是 一 种 特殊 的 对 象 类 型 ,其 作用 是 使 用 单独 的 变量 名 来 存储 一 系列 的 值 ,所 以 创建 
一 个 新 的 数组 就 类 似 于 创建 一 个 对 象 实例 。 可 通过 new 运算 符 和 相应 的 数组 构造 函数 
Array() 来 完成 数组 的 创建 。 其 编写 方法 如 下 : 


var myarray = new Array(); // 创 建 一 个 没有 元 素 的 空 数组 

var myarray = new Array(5); // 创 建 一 个 有 5 个 元 素 的 数组 ,元 素 的 值 当前 为 undef ined 

var myarray = new Array( "北京 ", "China", 2011, true); ”// 创 建 一 个 有 4 个 元 素 的 数组 ,并 赋予 相 
// 应 的 值 


除 以 上 3 种 方法 外 ,还 有 一 种 最 直接 的 方法 ,就 是 直接 把 值 列表 用 逗号 分 隔 , 然 后 用 方 
括号 括 起 赋值 给 变量 ,编写 方法 如 下 : 


var myarray =[" 北 京 ", "China", 2011, true]; 


这 种 方法 使 数组 的 使 用 更 加 方便 ,创建 完 数组 后 ,通过 下 标 访问 各 元 素 。 

2. 数组 的 访问 

数组 可 通过 指定 的 数组 名 及 下 标 来 访问 某 个 特定 的 元 素 。 例 如 : document. myarray 
(myarray[0]) 表 示 输 出 数组 myarray 的 第 一 个 元 素 。 

JavaScript 的 数组 创建 后 并 不 是 一 成 不 变 的 ,其 元 素 存储 的 数据 可 以 根据 程序 的 运行 
而 改变 ,元素 的 个 数 也 可 以 改变 ,数组 的 length 属性 ( 即 数组 的 长 度 ) 不 仅 可 读 , 也 可 写 。 如 
果 要 给 数组 添加 一 个 新 元 素 ,只 需要 直接 把 数据 给 数组 的 一 个 新 下 标 即 可 ,编写 方法 如 下 : 


var myarray = new Array(" 北 京 ", "China", 2011, true); 
myarray[4] = 100; 


这 表示 为 数组 myarray 添加 了 一 个 下 标 为 4 的 元 素 ,并 存储 了 数字 值 100。 

JavaScript 的 数组 是 稀 玖 的 , 即 数组 元 素 下 标 不 是 连续 存储 在 内 存 中 的 ,如 创建 一 个 空 
数组 ,分 别 添加 一 个 下 标 为 0 的 元 素 和 一 个 下 标 为 100 的 元 素 ,内 存 只 会 给 这 两 个 元 素 分 配 
空间 。 添 加 了 新 元 素 后 ,数组 的 length 属性 将 自动 更 新 ,这 是 数组 有 别 于 一 般 对 象 的 重要 
属性 。 当 数组 的 length 属性 值 小 于 元 素 的 个 数 时 ,数组 的 长 度 将 被 截断 , 即 后 面 的 元 素 将 
被 删除 ; 而 当 数 组 的 length 属性 值 大 于 元 素 的 个 数 时 ,数组 将 会 在 后 面 添加 若干 个 值 为 
undefined 的 元 素 ,以 填 满 length 属性 值 所 指定 的 元 素 个 数 。 

【 例 10-3】〗 数组 元 素 的 操作 。 


<! -- 程序 10 - 3. htm]l 一 一 > 
< html > 
<head > 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 数 组 元 素 的 操作 </title> 
< script type = "text/javascript"> 
Var myArray = new Array(100, 50, 20); 
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</script> 
</head> 
<body> 
<div id= "main"> 
< script type = "text/javascript"> 
document. write( "myArray 数组 的 长 度 是 " + myArray. length); 
myArray[4] = 5; 
gennenE ve te("<hr /> nyiray dc 约定 5 Tr yrav al) 
document. write("< hr /> myArray 数组 的 长 度 是 " + myArray. length); 
for(var i=0; i<myArray. length; i++){ 
document. write("< hr /> myArray 数组 的 第 " + (i+1) + "个 元 素 是 " + myArray[i]); 
| 
myArray. length —= 3; 
document. write("< hr /> myArray 数组 的 长 度 是 " + myArray. length); 
for(var i=0; i<myArray. length; i++ ){ 
document. write("< hr /> myArray 数组 的 第 " + (i+1) + "个 元 素 是 " + myArray[i]); 
| 
</script> 
</div> 
</body> 
</html > 





本 例 使 用 var myArray 王 new Array(100,50,20); 语句 创建 一 个 数组 ,并 设 数组 的 初始 
长 度 为 3, 各 元 素 的 值 分 别 为 100、50、20, 然 后 通过 语句 myArray[4] 二 5; 改变 了 该 数组 的 
长 度 , 设 置 数组 的 第 5 个 元 素 的 值 为 5, 通 过 中 间 的 for 循环 可 以 看 到 改变 后 的 数组 的 每 个 值 ， 
接着 使 用 myArray. length- 一 3; 语 句 再 次 改变 了 数组 的 度 ,最 终 的 浏览 效果 如 图 10-3 所 示 。 


数组 元 素 的 操作 - Windows Interne... [- | 右 | 区 | 
文件 @) 编辑 EE) 查看 WW) 收 豪 夹 ) 工具 I) 帮助 人 D 
SO | 关 -tlo\ 程 序 10-3 hml 国 |# | xx 














myArray 数 组 的 长 度 是 3 
myArray 数 组 的 第 5 个 元 素 是 5 
myArray 数 组 的 长 度 是 5 
myArray 数 组 的 第 1 个 元 素 是 100 
myArray 数 组 的 第 2 个 元 素 是 50 
myArray 数 组 的 第 3 个 元 素 是 20 
myArray 数 组 的 第 4 个 元 素 是 ndefined 
myArray 数 组 的 第 5 个 元 素 是 5 
myArray 数 组 的 长 度 是 2 
myArray 数 组 的 第 1 个 元 素 是 100 
myArray 数 组 的 第 ?个 元 素 是 50 


ETET] 























图 10-3 数组 元 素 的 访问 操作 


3. 数组 的 方法 

数组 作为 程序 中 常用 的 数据 类 型 .JavaScript 提供 了 很 多 方法 ,使 用 这 些 方法 可 以 更 加 
灵活 地 操作 数组 ,常用 的 数组 方法 如 下 。 

(1) join() 方 法 : 该 方法 是 使 用 指定 的 间隔 符 将 数组 中 的 元 素 进行 拼接 ,然后 以 字符 囊 
的 形式 返回 给 程序 。 例 如 ; 


var arrlStr =arrl. join("—"); 
document. write(arrlStr); // 结 果 显 示 为 : a-b-c-d-e 


专家 点 拨 : join() 方 法 无 参数 时 ,默认 的 分 隔 符 为 去 号 。 
(2) concat() 方 法 : 其 作用 是 将 两 个 或 两 个 以 上 的 数组 进行 连接 合并 ,结果 返回 一 个 新 
数组 ,新 数组 在 返回 的 同时 创建 。 例 如 : 


var arrl=[ an ve 7 

var arr2=["b","d"]; 

var arr22= ["e","f"]; 

Var arr3 = arrl. concat (arr2,arr22); 

document. write(arr3); // 结 果 显 示 为 : a,c,b,d,e,f 


(3) pop()Vpush() 方 法 : 这 两 个 主要 实现 了 堆栈 的 操作 ,push() 是 入 栈 , 即 在 数组 尾部 
添加 元 素 , 并 返回 修改 后 的 数组 长 度 。pop() 是 出 栈 , 即 在 数组 尾部 删除 一 个 元 素 并 返回 元 
素 值 。 例 如 : 


var arrl = ["a", "b"]; 
arrl. push("c", "d"); 


document. write(arr1); // 结 果 为 : a,b,c,d 
var value = arrl. pop(); 
document. write( value); // 结 果 为 : d 


(4) reverse() 方 法 : 该 方法 的 作用 是 将 数组 反 向 排序 , 即 最 后 一 个 元 素 排 在 第 一 个 , 倒 
数 第 二 个 元 素 排 在 第 二 个 ,依次 类 推 。 例 如 : 


War arrlie= La pb ey 
arrl. reverse(); 


document. write(arr1); // 结 果 为 : c,b,a 


(5) sort() 方 法 : 该 方法 按照 指定 的 排序 规则 进行 排序 ,如 果 参 数 为 空 , 则 按照 默认 的 
字母 和 数字 进行 排序 。 例 如 : 


function mVySort(ol,o2){ 
if(ol.length> o2){ 
return 1; 
} 


return 一 17 
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arrl. sort(); 

document. write(arrl1); // 结 果 为 : a,bd,c 
arrl. sort(mySort); 

document. write(arrl1); // 结 果 为 : bd,c,a 


(6) shift()/unshift() 方 法 : shift() 是 指 将 数组 的 第 一 个 元 素 取出 ,并 返回 该 元 素 的 值 ， 
和 pop() 方 法 类 似 , 也 许 删除 数组 的 元 素 , 只 是 删除 的 位 置 在 数组 的 头 部 。unshift() 的 作用 
是 将 一 个 元 素 插入 到 数组 的 第 一 个 位 置 ,类 似 于 push() 方 法 ,但 插入 的 位 置 也 是 在 数组 的 
头 部 。 例 如 : 


var arrl = ["a","b","c"]; 
var value =arrl. shift(); 


document. write( value); // 输 出 为 : a 

document. write(arr1); // 输 出 为 : byc 

var value2 =arrl. unshift("g"); 

document. write( value); // 亚 输出 为 undefined, Firefox 输出 为 3 
document. write(arrl1); // 输 出 为 : g, b,c 


(7) slice() 方 法 : 该 方法 用 于 截取 数组 的 一 部 分 ,并 返回 一 个 子 数组 ,其 参数 为 要 截取 
数组 的 起 始点 元 素 位 置 及 截取 的 数量 。 如 果 参 数 只 有 一 个 ,代表 从 这 个 元 素 开 始 一 直 截 取 
到 最 后 一 个 元 素 ; 如 果 参 数 为 负数 , 则 表示 从 数组 尾部 开始 定位 起 始 元 素 的 位 置 , 如 参数 为 
一 2, 就 代表 倒数 第 2 个 元 素 。 例 如 : 


var nrri=[ a, D7" er de ls 


var arr2 = arrl. slice(0,3); // 数 组 从 第 0 个 元 素 开 始 截取 , 共 取 3 个 元 素 
document. write("<hr>" +arr2); // 输 出 为 : a,b,c 

var arr2 = arrl. slice(1); // 数 组 从 第 1 个 元 素 开始 截取 

document. write("<hr>" +arr2); // 输 出 为 : b,c,d,e 

var arr2 = arrl. slice( — 3); // 数 组 从 倒数 第 3 个 元 素 开始 截取 
document. write("<hr>" +arr2); // 输 出 为 : c,d,e 


(8) splice() 方 法 : 该 方法 是 从 指定 的 位 置 开 始 , 删 除 后 面 多 个 数组 元 素 ,并 从 删除 处 开 
始 依 次 插入 新 的 元 素 值 , 即 相当 于 在 修改 数组 元 素 的 值 。 其 编写 方法 有 以 下 两 种 。 


myarray. splice( 起 始 位 置 ,删除 数量 ); 
myarray. splice( 起 始 位 置 ,删除 数量 ,插入 元 素 值 1, 插 入 元 素 值 2,…, 插 入 元 素 值 n); 


第 一 种 方法 只 能 删除 数组 元 素 .返回 被 删除 元 素 的 值 .第 二 种 方法 则 是 用 新 插入 的 元 素 
逐个 修改 所 删除 的 元 素 。 例 如 : 


var arrl= ("a rb Re 7 

arrl. splice(1,1,"m","n","o"); 

document. write(arr1); // 输 出 为 : a,m,n,o,c 

arrl. splice(1,3); // 数 组 将 第 1 个 元 素 开始 到 第 3 个 元 素 , 即 m,n,o 删除 
document. write(arr1); // 输 出 为 : a,c 


10.2.3 上 日 期 对 象 


日 期 对 象 的 主要 作用 是 在 页 面 中 显示 和 处 理 当 前 的 系统 时 间 , 为 了 获取 系统 的 日 期 和 
时 间 ,JavaScript 提供 了 专门 用 于 时 间 和 日 期 的 对 象 类 型 ,通过 new 运算 符 和 Date() 构 造 函 
数 就 可 以 创建 日 期 对 象 。 

1. 用 Date() 对 象 创建 日 期 

日 期 对 象 可 用 于 获取 日 期 时 间 , 并 可 通过 对 象 的 方法 进行 日 期 时 间 的 相关 操作 ,定义 方 
法 如 下 : 





var myDatel = new Date() ; 
// Date 对 象 自动 使 用 当前 的 日 期 和 时 间作 为 其 初始 值 ,注意 Date() 大 小 写 
var myDate4 = new Date(" 年 ,月 ,日 ,时 ,分 , 秒 ") ; 
var myDate5 = new Date(" 年 ,月 ,日 ") ; 
var myDate6 = new Date( 毫 秒 值 ) ; 


第 二 种 方法 与 第 三 种 方法 非常 相似 ,分 别 按照 不 同 的 格式 给 日 期 对 象 设置 初始 值 ,第 四 
种 方法 是 从 1970 年 1 月 1 日 0 时 到 指定 日 期 之 间 的 毫秒 数 为 指定 日 期 值 。 

专家 点 拨 : 由 于 JavaScript 程序 运行 于 浏览 器 端 ,因此 系统 的 日 期 时 间 都 是 来 自 浏览 
端的 系统 ,而 不 是 网 页 服务 器 的 系统 。 如 果 不 指定 时 区 ,都 采用 “UTC”( 世 界 时 ) 时 区 , 它 与 
“GMT”( 格 林 尼 治 时 间 ) 在 数值 上 是 一 致 的 。 

【 例 10-4】 Date() 对 象 的 应 用 。 


<! -- 程序 10- 4.html --> 





< html > 
<head > 
<meta http - equiv = "Content ~ Type" content = "text/html; charset = gb2312" /> 
<title> 显 示 日 期 时 间 </title> 
< script type = "text/javascript"> 
var myDatel = new Date( ); 
var myDate2 = new Date(2011,7,1); 
var myDate3 = new Date(1970, 1,1, 00, 00,00); 
var myDate4 = new Date(1758694862341); 
</script > 
</head> 
<body> 
< script type = "text/javascript"> 
document. write(" 现 在 的 时 间 是 : " + myDatel); 
document. write("< hr /> 建党 90 周年 纪念 日 是 : " + myDate2); 
document. write("< hr />C 语 言 的 生日 : " + myDate3); 
document. write("< hr /> 指定 的 日 期 : " + myDate4); 
</script> 
</body> 
</html > 














本 例 的 浏览 效果 如 图 10-4 所 示 , 从 效果 图 中 可 以 看 到 日 期 对 象 的 默认 显示 格式 ,其 中 
第 一 个 值 代表 星期 ,如 “Wed”, 第 二 个 值 代表 月 份 , 如 “Jul”, 第 三 个 值 代表 日 期 ,第 四 个 值 代 





JavaScript 松 心 对 象 


第 
10 


Web 前 端 届 计 与 开发 一 一 感 TML5 十 CSS3 十 JavaScript 微 课 版 





表 时 间 ， UTC 十 0800" 代 表 本 地 处 于 世界 时 区 东 8 区 (北京 时 间 ), 即 通用 的 格林 尼 治 时 间 
须 加 上 8 小 时 才 是 本 地 时 间 ,最 后 一 个 值 为 年 份 。 














眉 ] rtl0\ 程 序 10-4.htnl 图 | 寻 || 交 | | 狠 Give se 
大 号 示 时 间 [| 人 :日 - 口 和 +” 














现在 的 时 间 是 ， Wed Jul 6 10:27:18 UTC+0800 2011 
建党 90 周 年 纪念 日 是 ,Non Aug 1 00:00:00 UTC+0800 2011 


Cc 语言 的 生日 ，Sun Feb 1 00:00:00 UTC+0800 1970 





指定 的 日 期 :Wed Sep 24 14:21:02 UTC+0800 2025 





图 10-4 日 期 时 间 的 显示 


由 于 日 期 默认 的 返回 数据 格式 单一 ,为 了 能 更 灵活 地 处 理 日 期 时 间 , 可 采用 时 期 对 象 的 
内 置 方法 。 

2. Date() 对 象 的 方法 

日 期 对 象 的 内 置 方法 有 很 多 ,方便 设计 者 随意 操作 日 期 时 间 数 据 , 但 所 有 的 方法 主要 分 
为 两 种 格式 ,一 种 为 根据 系统 本 地 的 日 期 时 间 进 行 运算 , 另 一 种 即 根据 格林 尼 治 时 间 进 行 
计算 。 

(1) get 前 绷 方 法 组 。 这 组 方法 的 主要 作用 为 获取 系统 日 期 时 间或 系统 日 期 时 间 的 部 
分 数据 。 该 组 所 包含 的 方法 如 表 10-2 所 示 。 

表 10-2 ”get 前 缀 方法 组 


方 法 作 用 
getDate() ,getUTCDate() 返回 一 个 月 中 的 某 一 天 (1 一 31) 
getDay() ,getUTCDay() 返回 一 周 中 的 某 一 天 (0 一 6) , 即 返回 星期 几 ,0 表示 星期 天 
getMonth() ,getUTCMonth() 返回 月 份 (0~11) ,0 代表 1 月 
getFullYear() ,getUTCFullYear() 以 4 位 数字 返回 年 份 
getHours() ,getUTCHours() 返回 小 时 值 (0 一 23) 
getMinutes() ,getUTCMinutes() 返回 分 钟 值 (0 一 59) 
getSeconds() ,getUTCSeconds() 返回 秒 数值 (0 一 59) 


getMilliseconds() ,getUTCMilliseconds() ”返回 毫秒 值 (0 一 999) ,1 秒 一 1000 毫秒 
返回 1970 年 1 月 1 日 至 今 的 毫秒 数 ,与 时 区 无 关 


getTime() 
返回 本 地 时 间 与 格林 尼 治 标准 时 间 的 分 钟 差 


getTimezoneOffset() 
【 例 10-5】 get 前 级 方法 组 的 应 用 。 


<! -- 程序 10 - 5. htm] 一 一 > 
<html> 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 


<title> get 前 级 方法 组 </title> 


< script type = "text/javascript"> 
var myDate = new Date( ); 


</script> 
</head> 
<body> 


< script type = "text/javascript"> 





document. write(" 现 在 的 日 期 时 间 默 认 格式 是 : " + myDate); 
document. write("< hr > 今天 的 日 期 是 : " + myDate. getFullYear() + "年 " + (myDate. 
getMonth() + 1) + "月 " + myDate. getDate() + "日 周 " + myDate. getDay() ); 
document. write( "< hr > 现在 的 时 间 是 : " + myDate. getHours ( ) + ":" + myDate. 
getMinutes() + ":" +myDate. getSeconds() ); 
document. write(" | | 现在 的 格林 尼 治 时 间 是 : " + myDate. getUTCHours( ) + ":" + 
myDate. getUTCMinutes() +":" + myDate. getUTCSeconds( )); 
document, write("< hr /> 本 地 时 区 为 "+ ( -1 * myDate. getTimezoneOffset()/60)); 


</script> 
</body> 
</html > 


本 例 通 过 局 部 取 时 间 段 ,再 通过 字符 串 的 拼接 完成 自 定义 格式 ,浏览 后 的 效果 如 图 10-5 
所 示 。 注 意 月 份 必须 加 1 才 符 合 实际 习惯 。 


/2 get 前 把 方法 组 - Windows Internet Explorer 
收藏 夷 人 ) 工具 ) 帮助 人 D 


文件 中 编辑 外 查看 








3 加 rtl0\ 程 序 10- 
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图 10-5 





get 前 级 方法 组 的 应 用 示例 


(2) set 前 缀 方法 组 。 该 组 方法 的 主要 作用 为 处 理 日 期 时 间 数 据 ,其 所 包含 的 方法 如 


表 10-3 所 示 。 


表 10-3 set 前缀 方法 组 





方 法 作 用 
setDate() ,setUTCDate() 设置 月 的 某 一 天 (1 一 31) 
setMonth() ,setUTCMonth() 设置 月 份 (0~11) 
setFullYear() ,setUTCFullYear() 设置 4 位 数字 的 年 份 
setHours() ,setUTCHours() 设置 小 时 (0 一 23) 
setMinutes() ,setUTCMinutes() 设置 分 钟 (0 一 59) 
setSeconds() ,setUTCSeconds() 设置 秒 钟 (0 一 59) 
setMilliseconds() ,setUTCMilliseconds() 设置 毫秒 (0 一 999) 第 
setTime() 以 毫秒 设置 Date 对 象 10 
章 
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(3) 转 字符 串 方法 组 。 这 组 方法 以 to 为 前 缀 ,可 以 把 日 期 时 间 格 式 按 需要 转换 为 字符 
串 格式 ,其 包含 的 方法 如 表 10-4 所 示 。 
表 10-4 转 字符 串 方法 组 





方 法 作 用 
toSource() 返回 该 对 象 的 源 代码 
toString() ,toUTCString() 把 Date 对 象 转换 为 字符 串 
toTimeString() 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toDateString() 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
toLocaleString() 根据 本 地 时 间 格 式 把 Date 对 象 转 换 为 字符 串 
toLocaleTimeString() 根据 本 地 时 间 格 式 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toLocaleDateString() 根据 本 地 时 间 格 式 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 


时 间 日 期 数据 不 仅 可 用 于 显示 ,还 可 根据 需要 进行 计算 。 
【 例 10-6】 时 间 计算 程序 。 


<! -- 程序 10- 6. html -一 > 
<html > 
<head > 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 时 间 计 算 程 序 </title> 
< script type = "text/javascript"> 
var myDate = new Date( ); 
function display(){ 
var nowTxt = myDate. toLocaleDateString( ); 
document. getElementById("now"). innerText = nowTxt; 
; 
function pro(){ 
Var newY = document. getElementById("newY"). value; 
var newM = document. getElementById("newM"). value; 
var newD = document. getElementById("newD"). value; 
var newDate = new Date(newY, newM, newD) ; 
var offer = Math. abs(newDate. getTime( ) - myDate. getTime( )); 
var days = Math. floor(offer/(1000 * 60*# 60 * 24)) — 30; 
alert(" 新 日 期 和 今天 \n 相差 "+ days + "天 "); 
</script > 
</head> 
<body onload = "display();"> 
今天 的 日 期 为 : < span id= "now"></span> 
<hr> 
请 输入 新 日 期 : <br /> 
<input type = "text" jd = "newY" value="" size = "4" maxlength= "4" /> 年 
< input type = "text" id = "newM" value= "" size= "2" maxlength= "2" /> 月 
< input type = "text" id = "newD" value= "" size= "2" maxlength= "2" /> 日 
<button id = "btn" onclick = "pro() ;"> 计 算 </button > 
</body> 
</html > 





本 例 使 用 了 上 一 章 的 函数 知识 .如 < body onload 王 "display();"> 代 表 页 面 的 body 元 素 
载 和 人 后 将 执行 display() 函 数 ,显示 系统 今天 的 日 期 。 程 序 中 设计 了 一 个 “计算 ”按钮 ,使 用 
onclick 二 "pro();" 语 句 , 使 浏览 用 户 在 单 击 该 按钮 时 执行 pro() 函数 ,将 新 日 期 的 内 容 分 别 
赋 给 相应 的 变量 (newY ,newM ,newD) ,再 通过 创建 自 定义 日 期 对 象 的 方法 ,把 这 3 个 变量 
传递 到 Date() 构 造 函 数 中 , 即 得 到 新 日 期 对 象 ,然后 通过 新 日 期 对 象 与 今天 日 期 对 象 的 
getTime() 方 法 求 得 毫秒 值 ,最 后 求 出 两 个 毫秒 值 的 差 ,再 将 差 值 转换 为 天 数 ,由 alert 方法 
输出 。 浏 览 结果 如 图 10-6 所 示 。 
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图 10-6 时 间 计算 程序 浏览 效果 


专家 点 拨 : pro() 函 数 中 的 Math. abs() 方 法 为 数学 运算 方法 ,可 返回 参数 数值 的 绝对 
值 ,Math. floor() 方 法 则 可 返回 参数 数值 的 整数 部 分 。 


10.2.4 Math 对 象 


数学 运算 对 象 (Math) 的 作用 是 执行 普通 的 数学 任务 ,Math 对 象 提 供 了 多 种 算数 值 类 
型 和 函数 , 它 并 不 像 Date 和 String 那样 是 对 象 的 类 ,因此 没有 构造 函数 Math() ,可 直接 访 
问 其 属性 和 方法 ,在 面向 对 象 的 程序 设计 中 这 称 为 静态 属性 和 静态 方法 。 

Math 对 象 的 属性 为 数学 中 的 常数 值 , 即 恒定 不 变 的 值 , 只 能 读 取 ,不 能 写 和 人 ,其 常用 的 
属性 如 表 10-5 所 示 。 




















表 10-5 Math 对 象 的 属性 





属 性 描 述 
Math. E 返回 算术 常量 e, 即 自然 对 数 的 底数 ( 约 等 于 2. 718) 
Math. LN2 返回 2 的 自然 对 数 ( 约 等 于 0.693) 
Math. LN10 返回 10 的 自然 对 数 ( 约 等 于 2. 302) 
Math. LOG2E 返回 以 2 为 底 的 e 的 对 数 ( 约 等 于 1. 414) 
Math. LOG10E 返回 以 10 为 底 的 e 的 对 数 ( 约 等 于 0. 434) 
Math. PI 返回 圆周 率 ( 约 等 于 3. 14159) 
Math. SQRT1_2 返回 2 的 平方 根 的 倒数 ( 约 等 于 0.707) 
Math. SQRT2 返回 2 的 平方 根 ( 约 等 于 1.414) 
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Math 对 象 的 方法 比较 多 ,在 前 面 的 时 间 计 算 程序 中 已 经 使 用 过 Math. abs() 方 法 和 
Math. floor() 方 法 ,其 他 方法 如 表 10-6 所 示 。 


表 10-6 Math 对 象 的 方法 








者 法 描 述 
Math. absCx) 返回 数 的 绝对 值 
Math. acos(x) 返回 数 的 反 余弦 值 
Math. asin(x) 返回 数 的 反正 弦 值 
Math. atan( x) 以 介 于 一 PI/2 与 PI/2 弧度 之 间 的 数值 来 返回 x 的 反正 切 值 
Math. atan2(y, x) 返回 从 x 轴 到 点 (x,y) 的 角度 ( 介 于 一 P1/2 与 PI/2 弧度 之 间 ) 
Math. ceil(x) 对 数 进行 上 舍 入 
Math. cos( x) 返回 数 的 余弦 
Math. exp( x) 返回 e 的 指数 
Math. floor(x) 对 数 进行 下 舍 入 
Math. log( x) 返回 数 的 自然 对 数 ( 底 为 e) 
Math. max( x,y) 返回 x 和 y 中 的 最 高 值 
Math. min(x,y) 返回 x 和 y 中 的 最 低 值 
Math. pow(x,y) 返回 x 的 y 次 寡 
Math. random() 返回 0 一 1 的 随机 数 
Math. round( x) 把 数 四 舍 五 人 为 最 接近 的 整数 
Math. sin( x) 返回 数 的 正弦 
Math. sqrt(x) 返回 数 的 平方 根 
Math. tan(x) 返回 角 的 正切 
Math. toSource() 返回 该 对 象 的 源 代 码 
Math. valueOf() 返回 Math 对 象 的 原始 值 





【 例 10-7】 Math 对 象 的 应 用 。 


<! -- 程序 10- 7.html --> 
< html > 
<head > 
<meta http— equiv = "Content - TYpe" content = "text/html; charset = gb2312" /> 
<title> Math 对 象 </title> 
</head> 
<body > 
< script type = "text/javascript"> 
vara= -0.5, b=0.8; 
document. write(Math.abs(a) + "< br />"); 
document. write(Math.acos(a) + "< br />"); 
document. write(Math.asin(a) + "< br />"); 
document. write(Math. atan(a) + "< br />"); 
document. write(Math. ceil(a) + "< br />"); 
document. write(Math. cos(a) + "< br />"); 
document. write(Math. exp(a) + "< br />"); 
document. write(Math. floor(a) + "<br />"); 
document. write(Math. log(a) + "< br />"); 





document. write(Math. max(a,b) + "<br />"); 
document. write(Math. min(a,b) + "< br />"); 
document. write(Math. pow(a,b) + "< br />"); 
document. write(Math.random() + "< br />"); 
document. write(Math. round(b) + "<br />"); 
document. write(Math. sin(a) + "< br />"); 
document. write(Math. sqrt(b) + "< br />"); 
document. write(Math. tan(a) + "< br />"); 
</script> 
</body> 
</html> 





本 例 的 浏览 结果 如 图 10-7 所 示 。 
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图 10-7 Math 对 象 的 方法 示例 


10.3 宿主 对 象 


所 有 的 非 本 地 对 象 都 是 宿主 对 象 , 即 由 ECMAscript 实现 的 宿主 环境 提供 的 对 象 。 在 


JavaScript 中 所 有 的 浏览 器 对 象 模型 (BOM) 和 文档 对 象 模型 (DOM) 都 是 宿主 对 象 。 


10.3.1 浏览 器 对 象 模型 


JavaScript 除了 可 以 访问 本 身 内 置 的 各 种 对 象 外 ,还 可 以 访问 浏览 器 提供 的 对 象 ， 














实 


浏览 器 本 身 就 是 一 个 对 象 ,也 是 一 个 对 象 容器 , 它 包 含 了 很 多 功能 独立 的 小 对 象 ,通过 对 这 
些 对 象 的 访问 ,可 以 得 到 当前 网 页 及 浏览 器 本 身 的 一 些 信息 ,并 能 完成 有 关 的 操作 ,本 节 仅 


介绍 navigator 对 象 和 window 对 象 这 两 个 主要 的 浏览 器 对 象 。 
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1. navigator 对 象 

navigator 是 一 个 独立 的 对 象 ,用 于 存储 浏览 器 的 基本 信息 ,如 浏览 器 的 种 类 、 版 本 号 、 
操作 系统 等 属性 ,由 于 众多 浏览 器 对 Web 标准 的 支持 不 同 ,通过 这 个 对 象 , 则 可 以 对 不 同 的 
浏览 器 采取 不 同 的 代码 操作 。 

和 前 面 学 习 的 内 置 对 象 一 样 ,navigator 对 象 也 有 自己 的 属性 和 方法 ,其 属性 都 是 只 读 
的 ,通过 读 取 其 属性 ,网 页 设计 者 可 以 获取 浏览 器 的 相关 信息 ,其 编写 方法 如 下 : 








var myBrowser = navigator. 属性 名 ; 





navigator 对 象 所 包含 的 属性 描述 了 正在 使 用 的 浏览 器 信息 ,其 常用 属性 如 表 10-7 所 
示 , 可 以 使 用 这 些 属性 进行 平台 专用 的 配置 。 
表 10-7 navigator 对 象 常用 属性 


属 性 描 述 
appCodeName 返回 浏览 器 的 代码 名 ,如 Firefox、IE 的 代码 都 是 Mozilla 
appName 返回 浏览 器 的 名 称 
appVersion 返回 浏览 器 的 平台 和 版 本 信息 
browserLanguage 返回 当前 浏览 器 的 语言 
cookieEnabled 返回 指明 浏览 器 中 是 否 启用 cookie 的 布尔 值 
cpuClass 返回 浏览 器 系统 的 CPU 等 级 
onLine 返回 指明 系统 是 否 处 于 脱 机 模式 的 布尔 值 
platform 返回 运行 浏览 器 的 操作 系统 平台 
systemLanguage 返回 OS 使 用 的 默认 语言 


navigator 对 象 的 常用 方法 只 有 一 个 , 即 javaEnabled(), 其 作用 是 规定 浏览 器 是 否 启用 


Java, 返 回 布尔 值 。 
【 例 10-8〗 显示 浏览 者 系统 的 基本 信息 。 


<! -- 程序 10 - 8.html --> 
< htm]l > 
<head > 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> navigator 对 象 </title> 
</head> 
<body > 
< script type = "text/javascript"> 
document. write(" 你 的 浏览 器 名 称 是 " + navigator. appName) ; 
document. write("< hr /> 你 的 浏览 器 版 本 是 " + navigator. appVersion); 
Var lg; 
if(navigator. appName == "Microsoft Internet Explorer"){ 
if(navigator. systemLanguage== "zh 一 cn"){ 
1g= "简体 中 文 "; 
}else{ 
1g = navigator. systemLanguage; 
下 


J}else{ 
if(navigator. language == "zh— CN"){ 





1g= "简体 中 文 "; 
}else{ 
1g = navigator. language; 
,时 
document. write("< hr /> 你 系统 的 默认 语言 是 " + 19); 
</script> 
</body> 
</html> 


判断 浏览 器 的 信息 在 网 页 制作 中 很 常见 ,但 不 同 浏览 器 的 navigator 对 象 信息 并 不 一 
致 ,本 例 通过 两 层 判 断 , 分 别 对 IE 浏览 器 和 非 IE 浏览 器 做 不 同 的 处 理 , 从 而 显示 正确 的 语 





览 查看 效果 。 


言 属性 。 本 例 在 IE 浏览 器 中 的 浏览 效果 如 图 10-8 所 示 。 读 者 可 以 自行 在 其 他 浏览 器 中 浏 


navigator 对 象 - Windows Internet Explorer 国 |e]|E3 
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图 10-8 navigator 对 象 在 正 浏览 器 中 的 运行 效果 


专家 点 拨 : 由 于 不 同 的 浏览 器 对 navigator 对 象 的 支持 都 不 同 ,读者 在 制作 网 页 时 要 特 
别 留 意 浏 览 器 的 兼容 性 问题 。 

2. window 对 象 

浏览 器 窗口 与 网 页 之 间 , 网 页 与 网 页 各 组 成 部 分 之 间 是 一 种 从 属 关系 ,JavaScript 中 的 
window 窗口 对 象 是 JavaScript 中 最 大 的 对 象 ,位 于 所 有 对 象 的 最 项 层 , 是 其 他 对 象 的 父 对 
象 ,每 一 个 window 对 象 代 表 着 一 个 浏览 器 窗口 ,用 于 访问 其 内 部 的 其 他 对 象 。 

如 果 文 档 包含 框架 (frame 或 iframe 标签 ), 浏 览 器 会 为 HTML 文档 创建 一 个 window 
对 象 ,并 为 每 个 框架 创建 一 个 额外 的 window 对 象 。 

window 对 象 包括 许多 的 属性 、 方 法 和 事件 驱动 程序 ,设计 者 可 利用 该 对 象 的 这 些 属性 
和 方法 控制 浏览 器 窗口 显示 的 各 个 方面 ,如 对 话 框 ,框架 等 。 由 于 window 对 象 是 程序 的 全 


局 对 象 ,因此 引用 其 











属性 和 方法 时 可 省 略 对 象 名 称 , 即 要 引用 window 对 象 的 属性 和 方法 


时 ,不 需要 用 “window. xxx” 这 种 形式 ,而 直接 使 用 “xxx” 即 可 。 例 如 ,要 弹出 一 个 消息 框 ， 
可 只 写 alert() ,而 不 必 写 window. alert()。 


(1) window 对 象 的 属性 。window 窗口 对 象 的 属性 主要 用 来 对 浏览 器 中 存在 的 各 种 窗 
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口 和 框架 的 引用 ,其 主要 属性 如 表 10-8 所 示 。 
表 10-8 window 窗口 对 象 的 属性 











属 性 描 述 
closed 返回 窗口 是 否 已 被 关闭 
defaultStatus 设置 或 返回 窗口 状态 栏 中 的 默认 文本 
document 对 document 对 象 的 只 读 引用 
history 对 history 对 象 的 只 读 引用 
innerheight 返回 窗口 的 文档 显示 区 的 高 度 
innerwidth 返回 窗口 的 文档 显示 区 的 宽度 
length 设置 或 返回 窗口 中 的 框架 数量 
location 用 于 窗口 或 框架 的 location 对 象 
name 设置 或 返回 窗口 的 名 称 
navigator 对 navigator 对 象 的 只 读 引 用 
opener 返回 对 创建 此 窗口 的 窗口 的 引用 
outerheight 返回 窗口 的 外 部 高 度 
outerwidth 返回 窗口 的 外 部 宽度 
page XOffset 设置 或 返回 当前 页 面相 对 于 窗口 显示 区 左上 角 的 X 位 置 
pageYOffset 设置 或 返回 当前 页 面相 对 于 窗口 显示 区 左上 角 的 YY 位置 
parent 返回 父 窗口 
Screen 对 screen 对 象 的 只 读 引用 
self 返回 对 当前 窗口 的 引用 ,等 价 于 Window 属性 
Status 设置 窗口 状态 栏 的 文本 
top 返回 最 顶层 的 先辈 窗口 
window window 属性 等 价 于 self 属性 , 它 包 含 了 对 窗口 自身 的 引用 


(2) window 对 象 的 方法 。window 对 象 的 方法 主要 用 来 提供 信息 或 输入 数据 ,以 及 创 
建 一 个 新 的 窗口 ,其 常用 方法 主要 有 以 下 几 个。 

Q@ alert() 方 法 : 用 于 弹出 一 个 带 有 一 段 指定 消息 和 一 个 确认 按钮 的 警告 框 。 

@ confirm 方法 : 弹出 一 个 确认 对 话 框 , 在 对 话 框 中 显示 指定 的 询问 文字 ,在 询问 窗口 
中 将 显示 “确定 "和 “取消 "按钮 ,车 单 击 “ 确 定 ” 按 钮 , 则 返回 true 值 ; 若 单 击 “取消 ?按钮 , 则 
返回 false。 

@ prompt 方法 : 功能 是 产生 一 个 输入 窗口 ,允许 用 户 进行 数据 输入 ,并 可 使 用 默认 值 ， 
所 输入 的 数据 作为 该 方法 的 返回 值 , 即 返回 输入 的 值 。 其 基本 格式 如 下 : 


prompt(" 提 示 信息 ", 默认 值 ) // 默 认 值 为 可 选项 


最 后 车 单 击 “ 确 定 ” 按 钮 结束 对 话 框 , 则 返回 所 输入 的 值 ; 若 单 击 * 取 消 ” 按 钮 , 则 返回 
null 值 。 
【 例 10-9】 window 对 象 提示 框 的 应 用 。 


< -一 程序 10- 9.htnl 一 一 > 
<html > 


<head> 


<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 提 示 框 的 应 用 </title> 
Cs 


name 


name 


alert(name + "你 好 ! 下面 要 开始 考试 了 !"); 
证 (confirm(" 你 确实 准备 好 了 吗 ?")){ 


location. href = "exam. html1"; 


De 


= prompt(" 请 输入 你 的 姓名 :",name); 















































</script > 

</head> 

<body> 

</body> 

</html > 

本 例 使 用 了 3 个 不 同 的 弹出 窗口 的 方法 ,在 浏览 器 中 打开 时 ,首先 弹出 prompt( ) 方 法 

的 输入 窗口 ,如 图 10-9 所 示 , 提 出 输入 姓名 ,输入 完成 后 单 击 “ 确 定 ” 按 钮 , 则 弹出 alert( ) 方 
法 的 窗口 提示 用 户 ,如 图 10-10 所 示 , 在 该 窗口 中 单 击 “ 确 定 ” 按 钮 后 ,又 弹出 了 第 三 个 
confirm() 方 法 的 窗口 ,以 供用 户 确认 ,如 图 10-11 所 示 , 如 单 击 “ 确 定 ” 按 钮 , 则 进入 相关 页 
面 ,如 单 击 “ 取 消 " 按 钮 , 则 不 进入 下 一 个 页 面 。 


来 自 网 页 的 消息 区 





Explorer 用 户 提示 


脚本 提示 
请 输入 你 的 姓名 





[be 





图 10-9 prompt() 方 法 的 输入 窗口 


来 自 网 页 的 消息 区 | 


? abec 你 好 1 下面 要 开始 等 试 了 ! 你 确实 准备 好 了 吗 ? 
2 


CC 要 








图 10-10 alert() 方 法 的 提示 窗口 图 10-11 confirm() 方 法 的 确认 窗口 


@ open 方法: 该 方法 用 于 创建 一 个 新 的 浏览 器 窗口 ,并 在 该 窗口 中 载 和 人 url 地址 指定 
的 网 页 。 该 方法 被 调用 后 .将 返回 该 窗口 对 象 ,其 编写 格式 如 下 : 


window. open(url, 窗口 名 称 ,窗口 属性 1, 窗口 属性 2, 窗口 属性 3,…) 


其 中 url 指定 在 新 建 的 窗口 中 所 要 显示 的 网 页 的 地 址 。“ 窗 口 名称 ” 即 给 新 建 的 浏览 器 
窗口 命名 ,为 可 选项 。 后 面 的 “窗口 属性 ”是 一 个 逗号 分 隔 的 参数 列表 ,用 以 指定 窗口 的 大 小 


和 外 观 ,为 可 选项 ,其 相关 属性 值 及 功能 如 表 10-9 所 示 。 
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表 10-9 打开 窗口 的 属性 








属 性 值 售 ” 文 

width 指定 以 像素 为 单位 的 窗口 宽度 

height 指定 以 像素 为 单位 的 窗口 高 度 

top 窗口 距离 屏幕 顶端 的 像素 值 

left 窗口 距离 屏幕 左 端的 像素 值 

toolbar 指定 窗口 是 否 显示 标准 工具 栏 ,设置 为 no 不 显示 ,yes 显示 
menubar 指定 窗口 是 否 显示 菜单 栏 , 设 置 为 no 不 显示 ,yes 显示 
directories 指定 窗口 是 否 显示 目录 按钮 

scrollbars 指定 当 网 页 文档 大 于 窗口 时 ,是 否 显示 滚动 条 
resizable 指定 窗口 运行 时 是 否 可 以 改变 大 小 

location 指定 窗口 是 否 显示 地 址 栏 

status 指定 窗口 是 否 显示 状态 兰 

fullscreen 指定 窗口 是 否 全 屏 显示 ,设置 为 yes 全 屏 显 示 


打开 一 个 新 窗口 在 网 页 中 很 常见 ,只 要 能 合理 设置 其 属性 参数 ,还 能 轻松 地 定制 窗口 。 
【 例 10-10】 打开 可 定制 的 新 窗口 。 


<! -- 程序 10- 10. html --> 
<html> 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 可 定制 的 弹出 窗口 </title> 
< script type = "text/javascript"> 
function newW(){ 
Var W= document. getElementById("w").value; 
var h= document. getElementById("h").value; 
var hh = document. getElementById( "hh"). value; 
Var v= document. getElementById("v").value; 
var style = "directories = no, location= no,menubar = no,width="+w+",height ="+h; 
var myFunc = window. open( "程序 10 - 8. html]", "nwindow", style); 
myFunc. moveTo( hh, v) ; 
1 
</script> 
</head> 
<body > 
新 窗口 宽度 : < input type = "text" size= "4" id="w" value= "300" /> 
<br /> 
新 窗口 高 度 : < input type = "text" size= "4" id= "h" value= "200" /> 
<hr /> 
新 窗口 水 平 位 置 坐标 : < input type = "text" size= "4" id = "hh" value= "20" /> 
<br /> 
新 窗口 垂直 位 置 坐标 : < input type = "text" size= "4" id="v" value= "50" /> 
<hr /> 
<button onclick = "newW();"> 打 开 新 窗口 </button > 
</body> 
</html > 





本 例 的 浏览 效果 如 图 10-12 所 示 。 在 本 例 中 ,浏览 
用 户 可 在 指定 的 文本 输入 框 中 输入 要 打开 窗口 的 宽度 
和 高 度 ,并 输入 指定 位 置 的 坐标 (此 坐标 是 相对 于 浏览 
者 系统 的 屏幕 ,左上 角 为 原点 ) ,然后 单 击 “ 打 开 新 窗 
口 ?按钮 即 打开 一 个 新 的 指定 窗口 。 

本 例 在 newW 函数 中 使 用 open() 方 法 时 , 先 把 文 
本 框 获取 的 值 赋 给 变量 ,然后 通过 字符 串 拼 接 传递 参 
数 给 open() 方 法 ,open() 方 法 执行 后 的 新 窗口 对 象 再 
赋 给 变量 myFunc, 变 量 myFunc 再 执行 moveTo() 方 
法 ,使 得 窗口 定位 于 预 设 的 位 置 。 

专家 点 拨 : moveTo() 方 法 的 作用 是 把 窗口 的 左上 
角 移 动 到 一 个 指定 的 坐标 。 





可 定制 的 送出 窗口 -Window... [- 癌 ] 几 
文件 四 编辑 四 ”查看 中” 收 若 天 W) 工具 Q ” 
Fe 
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新 窗口 宽度 ，[300 | 
新 窗口 高 度 : |200 


新 窗口 水 平 位 置 坐 标 ， 
新 窗口 委 直 位 置 坐标 ， 


























图 10-12 窗口 的 定制 选项 








@ close() 方 法 : 该 方法 的 功能 是 关闭 指定 的 浏览 器 窗口 。 关 闭 窗 口 一 般 只 要 单 击 窗 





用 如 下 代码 来 关闭 网 页 的 窗口 。 


window. opener = null; 
window. open('', '_self'); 
window. close( ); 





口 右 上 角 的 “关闭 ”按钮 即 可 ,但 作为 网 页 浏览 者 , 仍 希 望 有 更 方便 的 操作 ,window 对 象 提 
供 了 close() 方 法 专用 于 关闭 网 页 窗口 ,但 无 参数 执行 close() 方 法 的 效果 并 不 好 ,会 出 现 关 
闭 确认 框 ,要 完美 地 关闭 网 页 窗口 .不同 的 浏览 器 有 不 同 的 方法 ,为 了 能 兼容 浏览 器 ,一 般 采 


这 段 代码 可 以 在 IE 及 FireFox 浏览 器 中 完美 的 关闭 页 面 窗口 , 且 无 确认 提示 。 
@ setTimeout()/clearTimeout() 方 法 : setTimeout() 方 法 的 功能 是 创建 一 个 定时 器 ， 
实现 经 过 指定 的 毫秒 数 后 ,自动 调用 函数 或 计算 表达 式 。 其 编写 格式 如 下 : 


var id = setTimeout( 函数 或 表达 式 , 毫秒 数 ); 


之 所 以 将 其 返回 给 一 个 id 变量 ,是 因为 setTimeout() 方 法 会 返回 一 个 内 部 的 ID 值 , 用 
于 需要 清除 函数 时 引用 ,清除 时 执行 clearTimeout() 方 法 ,其 编写 格式 如 下 : 


clearTimeout (timer); 


该 方法 用 于 结束 timer 指定 的 定时 器 。 格 式 中 的 timer 即 为 setTimeout() 的 返回 值 。 


【 例 10-11】 制作 一 个 定时 器 程序 。 


<! -- 程序 10 - 11. html --> 


< htnl > 

<head > 

<meta http— equiv = "Content — Type" content = "text/html; charset = gb2312" /> 
<title> 设 定时 钟 </title> 

<script language = "JavaScript"> 

var timer; 
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function clock() { 
var timestr = ""; 
var now = new Date( ); 
var hours = now. getHours(); 
var minutes = now. getMinutes( ); 
Var seconds = now. getSeconds(); 
timestr += hours; 
timestr += ((minutes <10)? ":0" : ":") +minutes; 
timestr += ((seconds <10)? ":0" : ":") + seconds; 
window. document. frmclock. txttime. value = timestr; 
if (window. document. frmclock. settime.value== timestr) { 
window.alert(" 起 床 啦 !1"); 
!! 
timer = setTimeout('clock()',1000); 
b 
function stopit() {clearTimeout (timer);} 
</script > 
</head> 
<body> 
<form action = "" method = "post" name= "frmclock" id = "frmclock"> 
<p> 





当前 时 间 : 
< input name = "txttime" type= "text" id= "txttime"> 
</p> 

<p> 设 定 闹钟 : 

< input name = "settime" type= "text" id = "settime"> 

</p> 

<p> 

< input type = "button" name = "Submit" value = "启动 时 钟 " onclick = "clock()"> 

< input type = "button"” name = "Submit2" value = "停止 时 钟 " onclick= "stopit()"> 
</p> 
</form> 
</body> 
</html > 


本 例 利 用 日 期 对 象 与 setTimeout( ) 方 法 结合 制作 一 个 闹钟 程序 ,浏览 效果 如 图 10-13 


re。 音 击 页 面 上 的 "启动 时 钟 "按钮 后 ,调用 clock() 函 
文件 四 编 得 四 “查看 中， 收 总 天 Q) 工具 | 数 ,在 “当前 时 间 "” 文 本 框 中 显示 当前 的 系统 时 间 ,语句 
2 a 本 Ee 息 | timer 二 setTimeout('clock()' ,1000) 表 示 每 隔 1 秒 钟 
更 新 一 次 系统 时 间 , 用 户 可 在 “ 设 定 闹钟 ”文本 框 中 输 
当前 时 间 ， [14:22:25 |] 入 指定 的 时 间 , 当 两 者 时 间 相 同时 , 则 自动 弹出 提示 
设 定 用 钟 [ |] 框 ,如 图 10-14 所 示 。 当 单 击 “ 停 止 时钟 ” 按 钮 后 , 则 清 
[Bi 除 闹 钟 提示 ,即使 两 者 时 间 相 同 ,也 不 弹出 提示 框 。 

@ setInterval( )/clearInterval() 方 法 : setInterval() 
方法 是 按照 指定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 
表达 式 。 该 方法 在 网 页 中 使 用 比较 频繁 ,可 用 于 图 片 、 
人 文字 等 元 素 的 移动 .其 编写 格式 如 下 : 
































是 我 的 电脑 





当前 时 间 ， 
设 定 闹钟 。 [14:23:50 








[后 动 时 钟 ] [停止 时 钟 














图 10-14 弹出 闹钟 提示 框 
var id = setInterval( 函数 或 表达 式 ,毫秒 数 ) 


与 setTimeout() 方 法 一 样 ,setInterval() 方 法 也 会 返回 一 个 内 部 的 ID 值 ,用 于 需要 清 
除 函 数 时 使 用 ,清除 函数 时 执行 clearInterval() 方 法 。 
【 例 10-12】 时 间 显示 。 


<! -- 程序 10 - 12. html -一 > 
<htm]l > 
<head > 
<meta http - equiv = "Content ~ Type" content = "text/html; charset = gb2312" /> 
<title > 时 间 显示 </title> 
</head> 
<body> 
< input type= "text" id = "clock" size= "35" /> 
< script language = javascript > 
var int = self. setInterval("clock()",50) 
function clock() 
var t = new Date( ) 
document. getElementById("clock").value=t 
) 
</script> 
<button onclick = "int = window. clearInterval( int)"> 停止 更 新 </button> 
</body> 
</html > 





本 例 采用 setInterval() 方 法 动态 显示 当前 时 间 , 浏 
览 效 果 如 图 10-15 所 示 , 当 单 击 “ 停 止 更 新 "按钮 时 , 调 
用 clearInterval( ) 清 除 动态 更 新 ,时 间 显示 停止 在 一 个 
时 间 点 不 再 更 新 。 


时 间 显示 - Windows Inter... 所] 问 罗 
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10.3.2 文档 对 象 模型 语 上 E 革 
文档 对 象 模型 是 W3C 组 织 推荐 的 处 理 可 扩展 置 | -Ra 图 |- 
标语 言 的 标准 编程 接口 ,可 利用 其 属性 .方法 操作 10 











10-15 ”时间 的 动态 显示 





HTML 和 XML 的 结构 ,并 定义 了 与 HTML 相关 联 的 
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对 象 ,是 通过 编程 直接 操纵 网 页 内 容 的 途径 。 文 档 对 象 模型 主要 包括 document 对 象 、.body 
对 象 .button 对 象 、form 对 象 、frame 对 象 .image 对 象 、.object 对 象 等 。 本 节 主 要 介绍 
document 对 象 及 form 对 象 ,其 他 对 象 请 读者 自行 参考 相关 资料 。 

1. document 对 象 

document 对 象 又 称 为 文档 对 象 , 是 window 对 象 中 的 一 个 子 对 象 , window 对 象 代表 浏 
览 器 窗口 ,而 document 对 象 代表 了 浏览 器 窗口 中 的 文档 ,在 JavaScript 的 对 象 模型 中 占据 
非常 重要 的 地 位 , 它 可 以 更 新 正在 载 人 和 已 经 载 人 的 文档 ,并 使 用 JavaScript 脚本 访问 其 属 
性 和 方法 来 操作 已 加 载 文档 中 所 包含 的 HTML 元 素 , 如 表单 form、 单 选 框 radio、 复 选 框 
checkbox、 下 拉 列 表 框 checkbox、 图 片 image、 链 接 herf 等 ,并 将 这 些 元 素 当 作 具 有 完整 属性 
和 方法 的 元 素 对 象 来 引用 。 

JavaScript 会 为 每 个 HTML 文档 自动 创建 一 个 document 对 象 ,document 对 象 主要 包 
括 HTML 文档 中 < body ></body > 内 的 内 容 , 即 HTML 文档 的 body 元 素 被 载 人 时 , 才 创 
建 document 对 象 , 故 在 HTML 文档 的 < head ></head > 部 分 编写 JavaScript 程序 时 ,程序 
顶层 编写 的 语句 是 无 法 访问 DOM 中 的 对 象 的 。 

(1) document 对 象 的 属性 。document 对 象 的 属性 在 不 同 的 浏览 器 中 会 有 部 分 差异 ， 
其 常用 的 属性 如 表 10-10 所 示 。 


表 10-10 document 对 象 的 常用 属性 











属 性 描 述 
document. title 设置 文档 标题 等 价 于 HTML 的 title 标签 
document. bgColor 设置 页 面 背景 色 
document. fgColor 设置 前 景色 (文本 颜色 ) 
document. linkColor 未 点 击 过 的 链接 颜色 
document. alinkColor 激活 链接 在 此 链接 上 ) 的 颜色 
document. vlinkColor 已 单 击 过 的 链接 颜色 
document. URL 设置 URL 属性 从 而 在 同一 窗口 打开 另 一 网 页 
document. fileCreatedDate 显示 文件 建立 日 期 ,只 读 属性 
document fileModifiedDate 显示 文件 修改 日 期 .只 读 属性 
document. lastModified 显示 文档 最 近 的 修改 时 间 , 只 读 属 性 
document. fileSize 显示 文件 大 小 ,只 读 属 性 
document. cookie 设置 和 读 出 cookie 
document. charset 设置 字符 集 简体 中 文 :gb2312 


【 例 10-13】〗】 document 对 象 的 属性 应 用 。 


<! -- 程序 10 - 13. html 一 一 > 
<html> 
<head> 
< meta http - equiv = "Content — Type" content = "text/html; charset = gb2312" /> 
<title> document 对 象 的 属性 </title> 
< script type = "text/javascript"> 

function dom(x){ 

var a= document. getElementById("a").value; 


switch(x){ 

case 1: document. bgColor = a; break; 
Case 2: document. fgColor = a; break; 
Case 3: document. linkColor = a; break; 


case 4: alert(document. lastModified); break; 


case 5: alert(document. URL); break; 
default: document. bgColor = "white"; 
Ht 
上 
</ script> 
</head> 
<body> 





<button onclick = "dom(4);"> 本 文档 修改 时 间 </button > 
<button onclick = "dom(5);"> 本 文档 URL</button> 


<hr /> 

< input type = "text" id= "a" value = "red" /> 
<button onclick = "dom(1);"> 背 景色 </button> 
<button onclick = "dom(2);"> 文 本 颜色 </button > 


< button onclick = "dom(3);"> 未 访问 链接 颜色 </button > 

<p><a href =" 间 "> document 对 象 </a> 又 称 为 文档 对 象 , 是 window 对 象 中 的 一 个 子 对 象 , window 对 
象 代表 浏览 器 窗口 ,而 document 对 象 代表 了 浏览 器 窗口 中 的 文档 , 在 JavaScript 的 对 象 模型 中 占据 
非常 重要 的 地 位 , 它 可 以 更 新 正在 载 人 和 已 经 载 人 的 文档 , 并 使 用 JavaScript 脚本 访问 其 属性 和 方 


法 来 操作 已 加 载 文档 中 所 包含 的 HTML 元 素 …… 
</body> 
</html > 


document 对 象 的 bgColor linkColor 等 属性 和 body 的 相应 属性 一 致 ,但 通过 程序 的 访 














docunent 对 象 的 属性 - Windows 


间 , 可 以 动态 地 改变 这 些 属性 ,本 例 第 一 行 的 按钮 用 于 读 取 文档 对 象 的 lastModified 属性 和 
URL 属性 ,并 通过 alert 方法 显示 在 信息 框 中 ,第 
个 按钮 ,将 用 户 输入 的 颜色 值 赋 给 document 对 象 的 相应 属性 ,如 背景 色 、 文 本 颜色 等 。 本 
例 的 浏览 效果 如 图 10-16 所 示 。 


二 行 的 文本 框 可 输入 颜色 值 ,通过 右边 的 3 


Internet E... [- | 区 | 


文件 人 ) ”编辑 下 ) 查看 WW) 收藏 亚信 ) 工具 CI) 帮助 人 0 
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(2) document 对 象 的 方法 。document 对 象 操 作文 档 的 方法 并 不 多 ,主要 包括 以 下 
交合 

Q@ open() 方 法 : 打开 文档 以 便 JavaScript 能 向 文档 的 当前 位 置 ( 指 插入 JavaScript 的 
位 置 ) 写 和 人 数据。 通常 不 需要 用 这 个 方法 ,因为 该 方法 在 需要 的 时 候 JavaScript 会 自动 
调用 。 

@ write()/writeln() 方 法 : 该 方法 用 于 向 文档 写 人 数据 ,所 写 人 的 内 容 会 当 作 标 准 文 
档 HTML 来 处 理 。writeln() 与 write() 的 不 同 点 在 于 writeln() 在 写 人 数据 以 后 会 加 一 个 
换行 ,但 这 个 换行 只 是 在 HTML 中 换行 ,具体 能 不 能 够 显示 出 来 要 看 插入 JavaScript 的 位 
置 而 定 。 如 在 < pre > 标记 中 插入 ,这 个 换行 也 会 体现 在 文档 中 。 

@ clear() 方 法 : 表示 清空 当前 文档 。 

@ focus() 方 法 : 表示 让 当前 文档 得 到 键盘 的 输入 焦点 。 

@ close() 方 法 : 表示 关闭 文档 ,停止 写 信 数据。 如 果 用 了 write () 或 clear() 方 法 ,就 
一 定 要 用 close( ) 方 法 来 保证 所 做 的 更 改 能 够 显示 出 来 。 如 果 文 档 还 没有 完全 读 取 , 即 
JavaScript 是 插 在 文档 中 的 , 则 可 不 必 使 用 该 方法 。 

【 例 10-14】 document 对 象 方法 的 应 用 。 


<! -- 程序 10 - 14. html --> 
< html > 
<head> 
<meta http - equiv = "Content ~ Type" content = "text/htm1; charset = gb2312" /> 
<title> document 对 象 的 方法 </title> 
< script type = "text/javascript"> 
function dom(x){ 
Var myWin; 
Switch(x){ 
case1: 
myWin = window. open("","a","height = 160, width = 300"); 
myWin. location = "Untitled— 1.html"; break; 
Case 2: 
myWin,. document. focus( ); 
myWin. document. open( ); "eh 
myWin. document. write(" 这 是 新 文档 流 的 内 容 。"); 视频 讲解 
myWin. document. close( ); break; 
default: 
document. bgColor = "white"; 
; 





</script > 

</head> 

<body> 

<pre> 

< script type = "text/javascript"> 
document.writeln("hello!"); 
document. writeln("world!"); 

</script > 


</pre> 
< script type = "text/javascript"> 
document. writeln("hellol") 7 
document. writeln("world!")7 
</ script> 
<hr 和 > 
<button onclick = "dom(1);"> 打 开 新 窗口 </button > 
< button onclick = "dom(2);"> 打 开 新 文档 流 </button > 
































</body> 

</html > 

本 例 通 过 新 窗口 的 操作 ,可 完全 展示 document 对 document 对 象 的 方法 -Wind... [,] 右 ] 区 
象 各 种 方法 的 作用 ,从 本 例 可 以 看 出 ,只 有 将 writeln() | 于 罗 ， 编 名 下 ) 查看 收藏 天) 工具 代 ? 
方法 包含 于 HTML 的 pre 元 素 中 其 换行 功能 才 有 作 Gro rere [le 
用 。 其 浏览 效果 如 图 10-17 所 示 。 在 本 例 中 ,设置 了 两 ii 











个 按钮 ,第 一 个 用 于 打开 一 个 新 窗口 ,再 用 第 二 个 按钮 “Bwana 
调用 函数 ,使 用 open() 方 法 输出 一 个 新 的 文档 流 , 为 了 
使 新 窗口 操作 后 位 于 其 他 窗口 之 前 ,所 以 在 第 二 个 按 
钮 的 代码 中 使 用 了 focus() 方 法 。 

2. form 对 象 

Form 即 表单 ,是 最 常见 的 与 JavaScript 一 起 使 用 ”图 10-17 document 对 象 方法 的 应 用 
的 HTML 元 素 之 一 ,表单 的 重要 性 在 HTML 部 分 已 
经 学 习 过 ,在 网 页 中 用 表单 来 收集 从 用 户 那 里 得 到 的 信息 ,并 且 将 这 些 信息 传输 给 服务 器 来 
处 理 。 有 了 表单 ,网 页 可 以 和 服务 器 后 台 程 序 轻松 交互 ,而 JavaScript 程序 也 同样 可 以 和 表 
单 完 成 丰富 的 互动 效果 ,如 在 提交 数据 到 服务 器 之 前 ,对 用 户 填写 的 数据 进行 合法 性 检测 。 
只 有 通过 了 JavaScript 程序 这 一 关 , 用 户 的 数据 才能 发 送 到 服务 器 端 进 行 处 理 。 

(1) form 对 象 的 访问 。 一 个 表单 隶属 一 个 文档 ,表单 构成 了 Web 页 面 的 基本 元 素 , 通 
常 一 个 Web 页 面 有 一 个 表单 或 几 个 表单 ,对 于 表单 对 象 的 引用 可 以 通过 使 用 隶属 文档 的 
forms[] 数 组 进行 访问 ,即使 在 只 有 一 个 表单 的 文档 中 ,表单 也 是 一 个 数组 的 元 素 ,其 引用 形 
式 可 有 如 下 几 种 : 


hello! world! 











打开 新 窗口 ] [ 打开 新 文档 流 











document. forms(0); 
document. forms[ 0]; 
document. forms. 0; 


注意 表单 数组 的 引用 是 采用 form 的 复数 形式 forms, 数 组 的 下 标 总 是 从 0 开始 。 
在 对 表单 命名 后 ,还 可 以 简单 地 通过 名 称 进行 引用 ,如 定义 表单 的 名 称 为 MyForm, 则 
引用 形式 如 下 所 示 : 


document. MyForm; 





如 果 在 一 个 表单 中 有 多 个 表单 元 素 具 有 相同 的 名 称 , 则 JavaScript 会 自动 创建 一 个 数 
组 来 存放 这 些 元 素 ,数组 中 的 每 个 元 素 都 代表 一 个 表单 元 素 。 如 在 一 个 表单 中 有 一 个 文本 | 章 
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框 和 一 个 文本 区 名 称 都 是 MyName, 则 MyName(0) 和 MyName(1) 分 别 代表 文本 框 和 文本 
区 ,数组 的 下 标 从 0 开始 ,表单 元 素 的 下 标 和 它们 在 表单 中 出 现 的 顺序 是 一 致 的 。 


(2) form 对 象 的 属性 。form 对 象 的 属性 主要 包括 以 下 几 个。 


Q@ action: action 








HTTP 服务 器 的 访问 方法 。 


@ name: name 属性 指明 了 表单 的 名 称 ,可 以 通过 name 属性 的 值 对 表单 进行 引用 。 

属性 值 可 以 是 窗口 名 称 或 Frame 名 称 , 分 别 代表 用 以 显示 反馈 信息 
属性 在 Frame 结构 下 发 挥 了 重要 的 作用 。 在 Frame 结构 下 ,有 时 会 希 
望 保留 交互 表单 的 Frame 部 分 ,而 使 用 另外 的 Frame 部 分 进行 浏览 。target 属性 指明 了 响 
应 页 面 应 该 在 Frame 的 哪 一 部 分 进行 显示 。 如 要 在 Frame 结构 中 ,使 用 frameLeft 进行 交 


@ target: target 
的 窗口 或 Frame, 该 








互 查询 ,使 用 frameRight 进行 浏览 , 则 可 以 对 target 属性 进行 设置 : 


Document. forms(0). target = "frameRight" 
Document. forms(1). target = "frameLeft" 


Q@ elements[ ]: elements[] 属 性 常常 是 多 个 表单 元 素 值 的 数组 ,用 于 访问 相应 的 表单 


对 象 。 


【 例 10-15】 form 对 象 的 属性 应 用 。 


<! -- 程序 10 - 15. html --> 


< html > 
<head> 


<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> form 对 象 的 属性 应 用 </title> 
< script type = "text/javascript"> 

function dom(x){ 


var fml = document. getElementById("fml").value; 


Var fm2 = document. getElementById("fm2").value; 


h 


switch(x){ 
case 1:document. forms[0].elements[ fml]. value = "选中 "; break; 
case 2:document. forms[0]. elements[fml].value = ""; break; 
case 3:document. form2[ "txt" + fm2].value= "选中 "; break; 
case 4:document. form2[ "txt" + fm2].value= ""; break; 


</script > 


</head> 


<body> 


第 1 个 表单 

< input type = "text" id= "fml" value = "0" size= "2" /> 
< button onclick = "dom(1);"> 选 中 </button> 

<button onclick = "dom(2);"> 清 除 </button> 


<br /> 


第 2 个 表单 


< input type = "text" id= "fm2" value = "1" size= "2" /> 


属性 指明 了 通信 的 HTTP 服务 器 的 ASP 程序 的 URL 地 址 。 
@ method: 一 个 表单 的 method 取 值 可 以 是 GET 或 POST,method 的 值 说 明了 访问 





<button onclick = "dom(3);"> 选 中 </button> 
<button onclick = "dom(4);"> 清 除 </button > 
< form name = "forml"> 

"" name = "txt0" /> 
name = "txt1" /> 
name = "txt2" /> 


<input type = "text" value= 

< input type = "text" value="" 
<input type = "text" value= 

</form> 

<hr /> 

< form name = "form2"> 
< input type = "text" value = "" name = "txt0" /> 
< input type = "text" value = "" name = "txt1" /> 
< input type = "text" value = "" name = "txt2" /> 

</form> 

</body> 

</html > 


在 本 例 中 , 自 上 而 下 设计 了 两 个 表单 ,每 个 表单 都 含有 3 个 文本 输入 框 控件 ,表单 外 的 
文本 输入 框 可 接受 用 户 输入 的 数据 , 当 用 户 单 击 “ 选 中 ”按钮 后 ,相应 表单 内 的 文本 输入 框 将 
被 填 和 人 “选中 ”字符 串 , 浏 览 效果 如 图 10-18 所 示 , 而 单 击 “ 清 除 ” 按 钮 后 ,相应 表单 的 文本 框 
被 清空 。 本 例 的 第 一 个 表单 的 文本 框 使 用 elements[ ] 接 收 数值 ,第 二 个 表单 通过 name 属 
性 来 完成 访问 。 

加 forn 对 象 的 属性 应 用 - Wicrosoft Internet Explorer 
文件 编辑 下) 查看 W) 收藏 A) 工具 CD) 才 助 人 D 


四 铺 -日 : 国 国 的 记 时 次 wx 思 辐 . 瑟 避 : 
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(3) form 对 象 的 方法 。form 对 象 的 方法 主要 有 两 种 情况 。 

@ reset() : 该 方法 将 表单 中 所 有 元 素 值 重新 设置 为 默认 状态 。 

@ submit(): 该 方法 将 表单 数据 发 送 给 服务 器 的 程序 处 理 , 即 实现 表单 信息 的 提交 。 

(4) 表单 中 的 基本 元 素 。 表 单 中 有 三 类 基本 元 素 , 即 输入 域 对 象 、. 选 择 类 对 象 和 按钮 类 
对 象 , 分 别 用 < input >、< select >、< button > 标记 来 创建 。 在 HTML 部 分 已 经 学 习 过 表单 
的 各 个 控件 .不 同 的 控件 会 对 应 不 同 的 对 象 ,如 单行 输入 文本 框 为 text 对 象 ,选择 列表 为 
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select 对 象 , 这 些 对 象 大 部 分 的 属性 和 方法 都 是 类 似 的 ,但 不 同 的 对 象 也 会 有 各 自 的 
方法 。 
@ 输入 域 。 文 本 输入 型 对 象 有 单行 输入 与 多 行 输入 两 大 类 。 





属性 及 


。 单行 输入 对 象 text: text 的 功能 是 创建 一 个 简单 的 文本 框 ,接受 输入 单行 文本 ,在 


HTML 中 已 经 讲 过 ,其 基本 属性 \ 方 法 及 事件 如 表 10-11 所 示 。 
表 10-11 text 的 基本 属性 ,方法 及 事件 























属 性 描 述 

name 设 定 提交 信息 时 的 信息 名 称 。 对 应 于 HTML 文档 中 的 Name 
value 用 以 设 定 出 现在 窗口 中 对 应 HTML 文档 中 Value 的 信息 
区 -。 靶 描 述 

blur() 将 当前 焦点 移 到 后 台 

select() 加 亮 文 字 

focus() 获得 text 输入 焦点 

事件 描述 

onFocus 当 Text 获得 焦点 时 ,产生 该 事件 

onBlur 元 素 失 去 ,产生 该 事件 

onselect 当 文字 被 加 亮 显示 后 ,产生 该 文件 

onchange 当 Text 元 素 值 改 变 时 ,产生 该 文件 


。 多 行 输入 对 象 textarea: textarea 的 功能 和 text 的 功能 类 似 , 二 者 的 方法 和 事件 也 
是 一 致 的 ,只 是 在 文本 框 中 接受 多 行文 本 的 输入 , 故 其 多 了 cols 和 rows 两 个 属性 ， 


分 别 用 于 指定 内 含 文本 的 行 数 与 列 数 。 


。 密码 输入 对 象 password: 该 对 象 与 text 对 象 的 用 法 也 是 一 致 的 ,只 是 显示 字符 为 


星 号 。 
【 例 10-16】 文本 输入 类 对 象 的 应 用 。 


<! -- 程序 10- 16. html --> 
<html > 
<head> 
<meta http - equiv = "Content ~ TYpe"” content = "text/html; charset = gb2312" /> 
<title> 文 本 输入 类 型 对 象 </title> 
< script type = "text/javascript"> 

function dom(x, y){ 

Var txt = document. getElementById("fm"). value; 


switch(x){ 

case 1: document. forml. elements[txt]. value = document. forml. elements [ txt]. type; 
break; 

case 2: document. forml. elements[txt]. value = ""; break; 

case 3: alert(" 你 要 写 什 么 ?"); break; 

case 4: alert(" 你 的 键盘 输入 焦点 进入 了 " +y. name) ; break; 

case 5: alert(" 你 的 键盘 输入 焦点 移 开 了 " + Y. name) ; break; 

} 

|: 


</script > 


</head> 

<body> 

请 选择 控件 (0,1,2) 

< input type = "text" id= "fm" value = "0" size= "2" /> 
<button onclick = "dom(1);"> 显 示 类 型 </button > 

< button onclick = "dom(2);"> 清 除 </button > 

<hr 人 > 

< form name = "form1"> 





< input type = "text" onfocus ="dom(4, this)" onblur = "dom(5, this);" value = "" name = 


"txtl" /> 


< input type = "password" onfocus = "dom(4,this)" onblur = "dom(5, this);" value = "" name = 


PLXEZ2 /> 


< textarea onchange = "dom(3)" cols = "20" rows = "3" name = "txt3"></textarea> 


</form> 
</body> 
</html > 





本 例 的 浏览 效果 如 图 10-19 所 示 , 在 本 例 中 ,用 户 输 
入 相应 的 控件 类 型 后 , 单 击 “ 显 示 类 型 "按钮 ,通过 访问 控 
件 的 type 属性 将 其 赋值 给 value 属性 ,以 字符 串 的 形式 显 
示 在 相应 的 输入 框 类 。 当 用 户 将 输入 焦点 移 人 text 对 象 
或 password 对 象 时 ,将 触发 onfocus 事件 .调用 dom() 陶 
数 , 使 用 aler 方法 提示 用 户 。 当 用 户 移动 焦点 时 将 触发 
onblur 事件 ,读者 可 自行 浏览 查看 效果 。 

专家 点 拨 : 在 本 例 中 有 个 难点 , 即 传递 了 两 个 参数 给 
dom() 函数 ,第 1 个 为 数字 ,用 于 switch 判断 ,第 2 个 为 
this, 代 表 控 件 本 身 , 通 过 this 参数 的 传递 ,alert() 方 法 执 
行 时 可 访问 当前 控件 的 name 属性 值 并 显示 。 

@ 选择 类 对 象 。 选 择 类 对 象 的 作用 是 对 列 出 的 多 个 
元 素 进行 选择 ,包括 单 选 按钮 对 象 (radio) 、 复 选 框 对 象 
(checkbox) 和 选择 列表 对 象 (select) 。 
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图 10-19 


文本 输入 类 对 象 的 应 用 


。 单 选 按钮 对 象 (radio) 可 大 大 方便 用 户 的 操作 , 常 以 组 形式 出 现 , 同 组 的 单 选 按钮 拥 


有 相同 的 name 属性 。 


。 复 选 框 对 象 (checkbox) 的 单 选 按钮 对 象 基本 一 样 ,也 是 成 组 使 用 , 同 组 复 选 框 对 象 
拥有 相同 的 name 属性 ,但 同 组 对 象 允许 多 个 对 象 同时 被 选中 。 
。 选择 列表 对 象 (select) 由 其 子 项 option 元 素 组 成 ,通过 数组 的 形式 访问 各 子 项 。 


【 例 10-17】 选择 类 对 象 的 应 用 。 


<! -- 程序 10- 17. html --> 
<html> 
<head> 


< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 


<title > 选择 类 型 对 象 </title> 


JavaScript 投 心 对 象 


Web 前 况 谴 计 与 开发 一 一 HTML5 十 CSS3 十 JavaScript 微 课 版 





< script type = "text/javascript"> 
function check(x){ 
switch(x){ 
case1: 
for(var i=0;i<document. forml. rd. length; it++){ 
if(document. forml. rd[i]. checked){ 
if(document. forml. rd[i]. value 上 海 "){ 
document. getElementById ("answer1"). innerText = document. forml. rd[ i]. value + 








"【 正 确 】"; 
J}else{ 
document. getElementById ("answer1"). innerText = document. forml. rd[ il]. value + 
【错误 】"; 
|! 
lf 
} break; 
Case 2: 
document. getElementById("answer2"). innerText = ""; 
for(var i= 0;i< document. forml.chk. length; i++){ 
if(document. forml.chk[i].checked){ 
if(document. forml.chk[i].value == "名 古 屋 "){ 
document. getElementById( "answer2"). innerText += document. forml. chk[ i].value+ 
错误 】，"; 
jelse{ 
document. getElementById( "answer2"). innerText += document. forml. chk[ i]. value + 
【正确 】，"; 
有 
} break; 
Case 3: 
for(var i=0;i<document. forml. sel. length; i++){ 
if(document. forml. sel. selectedIndex == i){ 
if(document. forml. sel. options[i].value == "伦敦 "){ 
document. getElementById ( " answer3"). innerText = document. forml. sel. options[i]. 
value + 【正确 3】"; 
Jelse{ 
document. getElementById ( " answer3"). innerText = document. forml. sel. options[i]. 
value + 错误 7; 
} break; 


} 
function Clear(){ 
document. form1. reset(); 
document. getElementById("answerl" ) . innerText = ""; 
document. getElementById("answer2"). innerText = ""; 
document. getElementById("answer3"). innerText = ""; 
</script> 


</head> 
<body> 
< form name = "forml"> 
<fieldset> 
<legend > 中国 哪个 城市 最 大 ?</legend>< br /> 
<label >< input type = "radio" name = "rd" value = "北京 ”onclick = "check(1);"”/> 北 京 
</label> 
<label >< input type = "radio" name = "rd”value = "武汉 " onclick = "check (1);" /> 武汉 
</label> 
<label >< input type = "radio" name = "rd" value = "上海 ”onclick = "check (1);"” /> 上 海 
</label> 
<label >< input type = "radio" name = "rd"” value = "广州 " onclick = "check (1);"” /> 广 洲 
</label> 
</fieldset > 
<br/> 
<div> 你 的 答案 是 : < span id= "answerl"></span></div> 
<hr /> 
<fieldset > 
<1legend > 哪些 城市 是 中 国 的 ?</legend >< br /> 
<label >< input type = "checkbox" name = "chk" value = "上海 " onclick = "check(2);" /> 上 海 
</label> 
<label >< input type = "checkbox" name= "chk" value = "名 古 屋 " onclick= "check(2);"/> 名 证 
屋 </label> 
<label >< input type = "checkbox” name = "chk" value = "南京 ”onclick = "check(2) ;"/> 南 京 
</label> 
<label >< input type = "checkbox” name = "chk" value = "郑州 ”" onclick = "check(2);"/> 郑 州 
</label> 
</fieldset > 
<br /> 
<div> 你 的 答案 是 : < span id = "answer2"></span></div> 
<hr /> 
<fieldset> 
<legend > 英国 的 首都 是 : </legend >< br /> 
< select name = "sel" onchange = "check(3);"> 
<option value = "伯明翰 "> 伯明翰 </option> 
<option value = "伦敦 "> 伦敦 </option> 
<option value = "纽约 "> 纽约 </option> 
<option value = "巴黎 "> 巴黎 </option> 
</select> 
</fieldset> 
<br /> 
< div> 你 的 答案 是 : < span id = "answer3"></span></div> 
<hr /> 
< button onclick = "Clear();"> 表 单数 据 复位 </button> 
</form> 
</body> 
</html > 
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本 例 代码 相对 较 多 ,通过 单 击 各 选项 完成 单 选 按钮 和 复 选 框 的 value 值 的 读 取 , 然 后 将 
其 赋值 到 span 元 素 的 文本 ,赋值 前 需要 做 答案 的 判断 。 选 择 列表 则 没有 使 用 单 击 事件 ,而 
是 使 用 onchange 事件 , 即 被 用 户 改变 选项 并 移 开 焦点 后 执行 指定 代码 。 本 例 在 最 后 还 加 了 
一 个 “表单 数据 复位 ”按钮 ,使 用 form 对 象 的 reset() 方 法 使 各 控件 值 复位 。 本 例 的 浏览 效 
果 如 图 10-20 所 示 。 





台 选择 类 型 对 得 - 了 Hicrosoft Internet Explorer 
文件 四 ”编辑 EE) 查看 收藏 人 工具 GD) 帮助 吕 ) 


@e- 日 - 国 国 的 用时 丙 smx @| 全 -名 6 -日 怀 煞 加 


地 址 加) | 御 c: \web\part10\ 程 序 10-17. htnl 
中 国 哪个 城市 最 大 ? 
O 〇 北京 武汉 @@ 上 海 O 广 洲 

















你 的 管 案 是 ， 上 海 【 正 确 】 
哪些 城市 是 中 国 的 ? 
口上 海 口 名 古 屋 回 南京 回 郑州 














你 的 答案 是 ， 南 京 【 正 确 】, 郑州 【正确 】， 


-英国 的 首都 是 ， 


[EE 国 
你 的 管 案 是 ， 伦 敦 【 正 确 】 
| 














图 10-20 选择 类 对 象 的 使 用 


@ 按钮 类 对 象 。 按 钮 是 经 常用 到 的 HTML 元 素 ,在 前 面 的 实例 中 已 经 用 到 多 次 ,按钮 
使 用 button 元 素 。 另 外 表单 也 内 置 了 按钮 类 型 的 控件 , 即 type 值 分 别 为 button submit 和 
reset 的 控件 ,其 中 type 值 为 button 的 按钮 与 < button ></button > 标签 构成 的 按钮 类 似 、 
没有 任何 功能 ,只 是 前 者 为 表单 的 内 置 控件 。type 值 为 submit 的 按钮 用 于 提交 所 属 表 单 的 
数据 到 服务 器 程序 ,常用 于 表单 最 终 的 数据 检测 ,而 type 值 为 reset 的 按钮 则 用 于 重 置 所 属 
表单 控件 值 ,与 forms 对 象 的 reset() 方 法 的 效果 一 致 。 


10.4 上 机 练习 与 指导 








10.4.1 制作 一 个 小 型 计算 器 


本 节 练 习 各 种 运算 方法 ,结合 学 习 的 内 置 对 象 知识 制作 一 个 简易 的 网 页 计算 器 。 程 序 
的 效果 图 如 图 10-21 所 示 。 


小 型 计算 到 - Windows Internet Explorer [- | 问 | 区 | 
文件 中 ”编辑 EE) ”查看 0 收 疗 夹 愉 工具 CI) 帮助 如 








日 加 -tnsaioitm 峡 | 台 ||x| 入: 





窑 收 天 | 大 TE 要 [ | 人 -6 





原始 数据 输入 | 


取 整 〔 网 舍 五 人) ] [ 取 整 (大 于 ) ] [ 取 整 (小 于 ) ] 
平方 根 ] [ 绝对 值 作 缠 值 ] 
运 工 结果 | - 


原始 数据 福生 ] 


求 较 小 值 | [ 求 较 大 值 


运算 结果 | 







































































时 我 的 电脑 三- 下 100x ” :; 


10-21 小 型 计算 器 的 效果 图 
参考 代码 如 下 : 
<! 一 上 机 练习 10 - 1.html -一 > 


<html> 
<head> 





<meta http— equiv = "Content - Type" content = "text/htm1; charset = gb2312" /> 


<title> 小 型 计算 器 </title> 
< script type = "text/javascript"> 
function start(x){ 
var num = document. getElementById( "num").value; 
var numR = document. getElementById( "numA"). value; 
var numB = document. getElementById( "numB"). value; 
var num2; 
var numC; 
switch(x){ 
case 1: num2 = Math. round(num); break; 
case 2: num2 = Math. ceil (num); break; 
case 3: num2 = Math. floor(num); break; 
case 4: num2 = Math. sqrt (num); break; 
case 5: num2 = Math. abs( num); break; 
case 6: num2 = Math. log( num); break; 
case 7: num2 = Math. sin(num) ; break; 
case 8: num2 = Math. cos(num); break; 
case 9: numC = Math. min(numA, numB); break; 
case 10: numC = Math. max(numA, numB); break; 
default: alert(" 没 有 操作 "); 
. 
if(num2!== undefined){ 
document. getElementById("num2").value = num2; 
: 
if(numC!== undef ined){ 
document. getElementById( "numC"). value = numC; 
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</script > 

</head> 

<body> 

原始 数据 输入 < input type= "text" id = "num" value ="" size="22" /><br /> 

<button onclick = "start(1);"> 取 整 ( 四 舍 五 人 )</button> 

<button onclick = "start(2);"> 取 整 (大 于 )</button > 

<button onclick = "start(3);"> 取 整 (小 于 )</button ><br /> 

<button onclick = "start(4) ; "> 平方 根 </button > 

<button onclick = "start(5);"> 绝 对 值 </button > 

<button onclick = "start(6);"> 自 然 对 数 </button > 

<button onclick = "start(7);"> 正 弦 值 </button > 

< button onclick = "start(8) ; "> 余弦 值 </button><br /> 

运算 结果 < input type = "text" id = "num2" value = "" disabled = "disabled" size = "27" /><hr /> 
原始 数据 输入 < input type = "text" id = "numA" value = "" size="12" /> gnbsp;< input type = 
"text" id = "numB" value="" size="12" /><br /> 

<button onclick = "start(9);"> 求 较 小 值 </button> 

<button onclick = "start(10);"> 求 较 大 值 </button><br /> 

运算 结果 < input type = "text" id= "numC" value= "" disabled= "disabled" size= "27" /><br /> 
</body> 

</html > 


10.4.2 制作 简单 的 网 页 动画 


本 节 练 习 window 对 象 的 setInterval() 方 法 与 clearInterval() 方 法 的 应 用 ,利用 这 两 个 
方法 间隔 显示 不 同 的 文字 ,并 使 指定 的 div 元 素 动态 地 改变 宽度 。 显 示 效 果 如 图 10-22 
所 示 。 


简单 网 页 动画 - Windows Internet Exp1...[- | 右 | 区 | 
文件 @) 六 辑 E) 查看 WW 收 戈 天 () 工具 CI) 帮助 t) 
的 昌 - 加 -tnts3aloztim 图 [多 [| | 入 5ve se 








座 收 冯 交 | 其 科 刘刚 画 二 这 全 这 
你 们 好 ! 
全 











10-22 简单 网 页 的 动画 效果 
参考 代码 如 下 : 


<! 一 上 机 练习 10 -2.html 一 > 

<html> 

<head> 

< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 


10.4.3 制作 数据 检测 功能 的 注册 页 面 


表单 在 网 站 中 应 用 非常 广泛 ,如 用 户 注册 、 用 户 登录 ,论坛 发 言 . 后 台 管 理 等 。 本 节 综 合 
表单 的 相关 知识 制作 一 个 能 检测 表单 数据 的 页 面 ,内 容 是 用 户 注册 页 面 ,最 终 效 果 如 图 10-23 
所 示 。 
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注册 页 面 - Windows Internet Explorer 辕 回 | 轩 | 

文件 到 编辑 查看 收藏 天 和) 工具 (0D) 。 才 助 四 

局 \ 上 机 绑 习 10-3. html 图 | 好 | | 筷 荆 arch 

| Sea 
注册 表单 界面 























出 生日 期 :9 放 厂 月 三 日 
性 别 @ 男 O 女 

最 高 学 历 研究生” 国 | 

业余 爱好 蔬 折 音乐 [所 游 戏 口上 网 口 ] 体 育 运动 

注册 重 谱 



































图 10-23 注册 页 面 效 果 图 


参考 代码 如 下 : 

<! 一 上 机 练习 10 - 3.html --> 

<html> 

<head> 

<meta http - equiv = "Content - Type" content = "text/htm1; charset = gb2312" /> 
<title> 注 册页 面 </title> 


< script type = "text/javascript"> 
function test(x){ 
var v= new Array( ); 
for(var i=0; i<document. forml.elements. length;i++){ 
v[i] = document. form]. elements[i].value; 
1 
Switch(x){ 
case 1: 
if(v[0]. length> 6){ 
document. getElementById("Submit"). innerText = "用 户 名 长 度 不 能 大 于 4 个 字符 "; 
document. forml. elements[0].value= ""; 
| 
break; 
Case 2: 
if(v[1]. length> 6){ 
document. getElementById("Submit"). innerText = "密码 长 度 不 能 大 于 4 个 字符 "; 


PY 


document. form1. elements[1]. value 区 
: 
break; 
了 
1 


function Key(x){ 
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<div id= "all"> 
<div id= "top"> 注 册 表 单 界面 </div> 
< form method = "post" action = "post.asp" onsubmit = "return(Submit(this));" name= "forml"> 
注册 基本 信息 
<table border = "0" cellspacing = "5" cellpadding = "5" class = "tb"> 
人 
<td class = "left"> 用 户 名 </td> 
<td>< input type= "text" class = "txt" size= "15" name = "userName" onchange = "test(1);" /> 
</td> 
</tr> 
ER 
<td class = "left"> 密 Snbsp;&nbsp; 码 </td> 
<td>< input type = "password" class= "txt" size="15" name= "pwd" onchange = "test(2);" /> 
</td> 
</tr> 
</table> 
个 人 详细 资料 
<table border = "0" cellspacing = "5" cellpadding= "5" class= "tb"> 
<tr> 
<td class = "left"> 出 生日 期 </td> 
<td > 19 < input type = "text" size = "2" maxlength = "2" class = "txt" name = "year" 
onchange = "test(3);" onkeyup = "Key(this);" /> 年 < input type = "text" size= "2" maxlength = 
"2" class= "txt" name = "month" onchange = "test(4);" onkeyup = "Key(this);" /> 月 < input type = 
"text" size= "2" maxlength= "2" class= "txt" name = "day" onchange = "test(5);" onkeyup= "Key 
(this);" />H</td> 
</tr> 
<tr> 
<td class = "left"> 性 别 </td> 
<td>< label >< input type = "radio" checked = "checked" name = "sex" value = 
< label >< input type = "radio" name = "sex" value = "2" /> 女 </label ></td> 
</tr> 
<tr> 
<td class = "left"> 最 高 学 历 </td> 
<td> 
<select> 
<option value = "研究 生 "”selected = "selected" class = "green"> 研 究 生 </option > 
< option value = "大 学 "> 大 学 </option> 
<option value = "高 中 /职高 ”class = "green"> 高 中 /职高 </option> 
<option value = "初中 及 以 下 "> 初中 及 以 下 </option > 
</select> 
</td> 
</tr> 
<tr> 
<td class = "left"> 业 余 爱 好 </td> 
<td>< label >< input checked= "checked" type = "checkbox" name = "fav" value = "1" /> 听 音 
乐 </label> 
<label >< input type = "checkbox" name = "fav" value = "2" /> 玩 游戏 </label > 
< label >< input type= "checkbox" name = "fav" value = "3"” /> 上 网 </label > 
<label >< input type= "checkbox" name = "fav" value = "4" /> 体育 运动 </label > 
</select> 





/> 男 </label> 





</td> 
</tr> 
</table> 
<div id = "bottom">< input type = "submit" value = "注册 " class = "btn" />< input type = 
"reset" value = " 重 设 " class = "btn" /></div> 
<div id= "Submit"></div> 


</form> 
</div> 
</body> 
</html > 
10.5 本 章 习 题 

一 、 选 择 题 
1. 下 列 对 象 中 不 属于 浏览 器 对 象 的 是 ( We 

A. location 对 象 B，window 对 象 Cstring 对 象 D. navigator 对 象 
2 以 下 ( ) 表 达 式 产生 一 个 0 一 7( 含 0,7) 的 随机 整数 。 

A. Math. floor(Math. random() * 6) B. Math. floor(Math. random() * 7) 


C. Math. floor(Math. random() * 8) D. Math. ceil(Math. random() * 8) 
3. 某 网 页 中 有 一 个 窗 体 对 象 ,其 名 称 是 mainForm, 该 窗 体 对 象 的 第 一 个 元 素 是 按钮 ， 


其 名 称 是 myButton, 表 述 该 按钮 对 象 的 方法 是 ( i 


A. document. forms. myButton B. document. mainForm. myButton 
C. document. forms[0]. element[L0] D. 以 上 都 可 以 
4. 在 JavaScript 浏览 器 对 象 模型 中 , window 对 象 的 ( ) 属 性 用 来 指定 浏览 器 状态 
栏 中 显示 的 临时 消息 。 
A. status B. screen C. history D. document 
5. 在 JavaScript 中 可 以 使 用 Date 对 象 的 ( ) 方 法 返回 一 个 月 中 的 每 一 天 。 
A. getDate B. getYear C. getMonth D. getTime 
二 、 填空 题 


1. JavaScript 对 象 包括 
2. window 对 象 中 的 alertO 太 法 的 河 义 是 用 于 弹出 个 带 有 一 段 指定 消息 和 一 








的 警告 框 。 
3. 产生 当前 日 期 的 方法 是 
4. form 对 象 用 于 收集 从 用 户 那 里 得 到 的 信息 ,并 且 将 这 些 信息 传输 给 来 
处 理 。 
5. 数组 对 象 的 concat( ) 方 法 的 作用 是 将 两 个 或 两 个 以 上 的 数组 进行 ,结果 返 
一 个 新 数组 ,新 数组 在 返回 的 同时 创建 。 
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用 户 可 以 通过 多 种 方式 与 浏览 器 载 人 的 页 面 进行 交互 ,而 事件 是 浏览 器 响应 用 户 交 互 
操作 的 一 种 机 制 ,JavaScript 的 事件 处 理 机 制 可 以 改变 浏览 器 响应 用 户 操作 的 方式 ，Web 
应 用 程序 开发 者 通过 JavaScript 脚本 内 置 的 和 自 定 义 的 事件 处 理 器 来 响应 用 户 的 动作 ,就 
可 开发 出 更 具 交互 性 和 动态 性 的 页 面 。 本 章 主 要 介绍 JavaScript 脚本 中 的 事件 处 理 的 概 
念 方法 , 列 出 了 JavaScript 预定 义 的 事件 处 理 器 ,并 且 介 绍 如 何 编 写 用 户 自 定义 的 事件 处 
理 函 数 ,以 及 如 何 将 它们 与 页 面 中 用 户 的 动作 相关 联 , 以 得 到 预期 的 交互 性 能 。 

本 章 主 要 内 容 如 下 。 

。 事件 的 概念 。 

。 常用 的 事件 分 析 。 

。 Event 对 象 的 应 用 。 


11.1 事件 响应 编程 简介 


事件 处 理 器 是 与 特定 的 文本 和 特定 的 事件 相 联系 的 JavaScript 脚本 代码 , 当 该 文本 发 
生 改 变 或 者 事件 被 触发 时 ,浏览 器 执行 该 代码 并 进行 相应 的 处 理 操作 ,而 响应 某 个 事件 而 进 
行 的 处 理 过 程 称 为 事件 处 理 。 


11.1.1 事件 和 事件 处 理 程序 


事件 的 使 用 使 得 JavaScript 程序 变 得 非常 灵活 ,事件 响应 是 对 象 化 编程 的 一 个 重要 环 
节 , 没 有 事件 响应 ,程序 就 会 变 得 僵硬 。 事 件 的 发 生 与 HTML 文档 的 载 人 进度 无 关 , 一 般 
来 说 ,网 页 载 人 后 会 发 生 多 种 事件 ,用 户 在 操作 页 面 元 素 时 也 会 发 生 多 种 事件 ,触发 事件 后 
执行 一 定 的 程序 就 是 JavaScript 事件 响应 编程 的 常用 模式 。 

只 有 在 触发 事件 后 才 处 理 的 程序 被 称 为 事件 处 理 程序 ,事件 响应 的 过 程 可 以 表示 为 3 
个 步骤 , 即 发 生 事件 一 启动 事件 处 理 程序 一 事件 响应 程序 做 出 反应 。 其 中 ,要 使 事件 处 理 程 
序 能 够 启动 ,必须 先 告诉 对 象 , 如 果 发 生 什么 事情 ,就 要 启动 什么 处 理 程序 ,否则 这 个 流程 就 
不 能 进行 下 去 。 事 件 的 处 理 程序 可 以 是 任意 JavaScript 语句 ,但 一 般 使 用 特定 的 自 定 义 函 
数 (Function) 来 处 理 , 这 种 函数 可 以 传递 很 多 参数 ,比较 常用 的 是 传递 this 参数 ,this 代表 
HTML 标签 的 相应 对 象 , 其 编写 方法 如 下 : 








<formaction="" method = "post" onsubmit = "return chk(this);"></form> 











这 里 的 this 代表 form 对 象 ,在 chk 函数 中 可 以 更 方便 地 引用 form 对 象 及 内 含 的 其 他 
控件 对 象 。 

专家 点 拨 : 编写 事件 处 理 程序 时 要 特别 注意 引号 的 使 用 , 当 外 部 使 用 双 引 号 时 ,内 部 要 
使 用 单 引 号 ,反之 一 样 。 

要 让 浏览 器 可 以 调用 合适 的 JavaScript 程序 ,必须 先 设置 HTML 文档 中 响应 事件 的 元 
素 , 再 设置 元 素 响应 事件 的 类 型 ,最 后 设置 响应 事件 的 程序 。 事 件 处 理 程序 并 不 写 在 
< script ></script> 中 ,而 是 写 在 能 触发 该 事件 的 HTML 标签 属性 中 ,编写 方法 如 下 : 





<HTML 标签 事件 属性 = "事件 处 理 程序 "> 


这 种 编写 方法 使 得 事件 处 理 程 序 成 为 程序 和 HTML 之 间 的 接口 ,避免 了 程序 与 
HTML 代码 混合 编写 ,利于 维护 。 


11.1.2 HTML 文档 事件 


HTML 文档 事件 是 指 用 户 从 载 人 目标 页 面 开始 直到 该 页 面 被 关闭 期 间 浏 览 器 的 动作 
及 该 页 面 对 用 户 操 作 的 响应 ,主要 分 为 浏览 器 事件 和 HTML 元 素 事 件 两 大 类 。 在 了 解 这 
两 类 事件 之 前 , 先 来 了 解 事件 捆绑 的 概念 。 

1. 事件 捆绑 

HTML 文档 将 元 素 的 常用 事件 (如 onclick ,onmouseover 等 ) 当 作 属性 捆绑 在 HTML 
元 素 上 , 当 该 元 素 的 特定 事件 发 生 时 ,对 应 于 此 特定 事件 的 事件 处 理 器 就 被 执行 ,并 将 处 理 
结果 返回 给 浏览 器 。 事 件 捆 绑 导 致 特定 的 代码 放置 在 其 所 处 对 象 的 事件 处 理 器 中 。 

2. 浏览 器 事件 

浏览 器 事件 是 指 从 载 入 文档 到 该 文档 被 关闭 期 间 的 浏览 器 事件 ,如 浏览 器 载 和 文档 事 
件 onload、 关 闭 该 文档 事件 onunload、 浏 览 器 失去 焦点 事件 onblur、 获 得 焦点 事件 
onfocus 等 。 

3. HTML 元 素 事件 

页 面 载 人 后 ,用 户 与 页 面 的 交互 主要 指 发 生 在 如 按钮 .链接 .表单 .图片 等 HTML 元 素 
上 的 用 户 动作 ,以 及 该 页 面 对 此 动作 所 做 出 的 响应 。 如 简单 的 鼠标 单 击 按钮 事件 ,元 素 为 
button, 事 件 为 click, 事 件 处 理 器 为 onclick() 。 只 要 了 解 了 该 事件 的 相关 信息 ,程序 员 就 可 
以 编写 此 接口 的 事件 处 理 程序 ,也 称 事件 处 理 器 ,以 完成 诸如 表单 验证 文本 框 内 容 选 择 等 
功能 。 

HTML 元 素 的 大 多 数 事件 属性 是 一 致 的 ,主要 有 表单 事件 .鼠标 事件 、 键 盘 事件 等 ,为 
了 便于 读者 查找 , 表 11-1 说 明了 HTML 元 素 中 一 些 常用 的 事件 。 


表 11-1 HTML 元 素 中 的 常用 事件 














事 件 说 明 
onsubmit 提交 表单 时 触发 此 事件 
onreset 当 表单 的 RESET 属性 被 激活 时 触发 此 事件 
onfocus 当 某 个 元 素 获得 焦点 时 触发 此 事件 
onchange 当前 元 素 失 去 焦点 并 且 元 素 内 容 发 生 改 变 时 触发 此 事件 
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续 表 

事 性 说 明 
onclick 鼠标 单 击 时 触发 此 事件 
ondbclick 鼠标 双击 时 触发 此 事件 
onmouseup 鼠标 按 下 后 松 开 鼠标 时 触发 此 事件 
onmousemove 鼠标 移动 时 触发 此 事件 
onmousedown 鼠标 按 下 时 触发 此 事件 
onmouseover 鼠标 移动 到 某 个 对 象 的 上 方 时 触发 此 事件 
onmouseout 鼠标 离开 某 个 对 象 范围 时 触发 此 事件 
onkeydown 键盘 上 某 个 按键 被 按 下 时 触发 此 事件 
onkeyup 键盘 上 某 个 按键 被 按 下 后 松 开 时 和 触发 此 事件 
onkeypress 键盘 上 某 个 按键 被 按 下 并 释放 时 触发 此 事件 


该 表 中 的 部 分 事件 在 前 面 的 示例 中 已 经 使 用 过 了 ,事件 及 事件 处 理 程序 合 在 一 起 完成 
了 JavaScript 程序 的 互动 性 。 


11.1.3 JavaScript 如 何 处 理事 件 


尽管 HTML 事件 属性 可 以 将 事件 处 理 器 绑 定 为 文本 的 一 部 分 ,但 其 代码 一 般 较 为 短 
小 ,功能 较 弱 ,只 适用 于 做 简单 的 数据 验证 ,返回 相关 提示 信息 等 。 相 比较 而 言 ,使 用 
JavaScript 脚本 可 以 更 为 方便 地 处 理 各 种 事件 ,特别 是 IE、Netscape 等 浏览 器 在 其 第 四 代 浏 
览 器 版 本 中 推出 更 为 先进 的 事件 模型 后 ,使 用 JavaScript 脚本 处 理事 件 更 显得 顺理成章 。 

JavaScript 脚本 处 理事 件 主要 可 通过 匿名 函数 . 显 式 声明 .手工 触发 等 方式 进行 ,这 几 
种 方法 在 隔离 HTML 文本 结构 与 逻辑 关系 的 程度 方面 略为 不 同 。 

(1) 匿名 函数 : 匿名 函数 的 方式 即使 用 function 对 象 构造 匿名 的 函数 ,并 将 其 方法 复 
制 给 事件 ,此 时 该 匿名 的 函数 成 为 该 事件 的 事件 处 理 器 。 

(2) 显 式 声明 : 即 在 设置 事件 处 理 器 时 ,不 使 用 匿名 函数 ,而 是 将 该 事件 的 处 理 器 设置 
为 已 经 存在 的 函数 。 

(3) 手工 触发 : 手工 触发 事件 的 原理 相当 简单 ,就 是 通过 其 他 元 素 的 方法 来 触发 一 个 
事件 而 不 需要 通过 用 户 的 动作 来 触发 该 事件 。 

事件 通过 发 送 消息 的 方式 来 触发 事件 处 理 器 对 用 户 的 动作 做 出 相关 响应 来 达到 交互 的 
目的 ,但 此 交互 一 般 只 是 单方 面 的 交互 , 即 事件 发 送 消息 给 事件 处 理 器 的 过 程 ,而 不 包括 事 
件 处 理 器 将 处 理 结 果 返 回 给 事件 的 过 程 。 事 实 上 ,事件 处 理 器 能 将 结果 返回 给 事件 ,并 由 此 
影响 事件 的 默认 行为 。 

由 于 HTML 将 事件 看 成 对 象 的 属性 ,因此 可 通过 给 该 属性 赋值 的 方式 来 改变 事件 的 
处 理 器 ,这 也 给 使 用 JavaScript 脚本 来 设置 事件 处 理 器 带 来 了 很 大 的 灵活 性 。 

【 例 11-1】 事件 方法 的 展示 。 














<! -- 程序 11- 1.html --> 
< html > 
<head > 
<meta http— equiv = "Content - TYpe" content = "text/html; charset = gb2312" /> 


<title> 事 件 方法 展示 </title> 
< script type = "text/javascript"> 
function Event (x, y){ 









var txt; 
switch(x){ 
case 1: 
txt=y.id+ "得 到 了 键盘 输入 焦点 "; 
y:blur(); 
document. getElementById("b").focus(); 
break; 
case 2: txt = y. id+ "得 到 了 键盘 输入 焦点 ";break; 
case 3: txt = y.id+ "失去 了 键盘 输入 焦点 ";break; 
| 
document. getElementById("txt"). innerText = txt; 
H 
</script > 
<style type = "text/css"> #txt{font - weight:bold; }</style> 
</head> 
<body> 


提示 文字 : < span id= "txt"></span><hr /> 
< input type = "text" id= "a" onfocus = "Event(1,this);" /> 
< input type = "text" id = "b" onfocus = "Event(2, this);" onblur= "Event(3, this);" /> 


</body> 
</html> 


本 例 展示 的 是 使 用 代码 触发 事件 ,浏览 效果 如 图 11-1 所 示 。 通 过 文本 的 内 容 提示 及 焦 
点 表现 可 知 ,本 例 的 第 一 个 文本 框 永远 都 无 法 得 到 输入 焦点 ,这 是 因为 在 代码 中 执行 了 blur() 
方法 ,第 一 个 文本 框 每 次 得 到 焦点 后 ,函数 就 立刻 执行 this. blur() 方 法 ,使 其 失去 焦点 ,并 
让 第 二 个 文本 框 得 到 焦点 。 这 种 代码 触发 事件 的 编程 方式 方便 了 网 页 中 互动 程序 的 制作 ， 
也 使 得 网 页 更 为 人 性 化 (如 自动 改变 键盘 的 输入 焦点 ) 。 
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提示 文字 ，b 失 去 了 键盘 输入 焦点 
| 

















电 我 的 电脑 -~ 下 100% ” .:; 





图 11-1 焦点 事件 示例 


11.2 主要 事件 分 析 


JavaScript 是 一 门 脚本 语言 ,也 是 一 门 基于 对 象 的 编程 语言 ,虽然 没有 专业 面向 对 象 编 
程 语言 那样 规范 的 类 的 继承 、 封 装 等 .但 它 和 面向 对 象 的 编程 一 样 必 须要 有 事件 的 驱动 才能 | 章 
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执行 程序 。JavaScript 提供 了 很 多 的 事件 ,如 鼠标 单 击 (onClick)、 文 本 框 内 容 的 改变 
(onChange) 等 .本 节 主 要 介绍 几 个 常用 的 事件 。 


11.2.1 饼 标 事件 


鼠标 事件 是 在 JavaScript 页 面 操作 中 使 用 最 频繁 的 事件 ,利用 鼠标 事件 可 以 实现 一 些 
特殊 的 单 击 和 移动 效果 ,一 般 用 于 图 像 (Image) .链接 (Link)、 各 类 按钮 (Radio .Button、 
Checkbox) 等 对 象 。 

鼠标 常见 的 事件 描述 可 参阅 表 11-1, 其 中 使 用 频率 最 高 的 即 为 鼠标 单 击 事件 onClick， 
在 网 页 上 单 击 鼠 标 时 ,就 会 触发 该 事件 ,同时 onClick 事件 调用 的 程序 块 就 会 被 执行 ,该 事 
件 通 常 与 按钮 一 起 使 用 ,其 编写 方法 如 下 : 





< input name = "button" type = "button" onclick = "调用 程序 块 " value = "按钮 上 对 应 名 称 "> 


【 例 11-2】 鼠标 onClick 事件。 


<! -- 程 序 11- 2.html --> 
< html > 
<head> 
<meta http - equiv = "Content - Type" content = "text/htm1; charset = gb2312" /> 
<title> 鼠 标 onClick 事件 </title> 
</head> 
<body> 
< script language = "javascript"> 
function rec(form) { 
form. recanswers. value = (form. recshortth. value * form. recheightth. value + form. reclength. 
value * form. recheightth. value) /2} 
</script > 
<form> 
<hl > 梯形 面积 </hl > 
上 底 < input type= "text" name= "recshortth">< br> 
下 底 < input type= "text" name= "reclength"><br> 
高 度 < input type= "text" name = "recheightth"><br> 
< input name = "button" type = "button" onclick = "rec(this. form)" value = "面积 "> 
<br> 
< input type+ "text" name= "recanswers"><br> 
</form> 
</body> 
</html > 





本 例 通 过 onClick 事件 调用 函数 rec(form) 来 计算 梯形 的 面积 ,浏览 效果 如 图 11-2 所 
示 , 在 相应 的 文本 框 中 输入 数据 后 , 单 击 “ 面 积 ” 按 钮 . 即 可 计算 出 面积 。 

鼠标 除 单 击 事件 外 ,还 有 一 些 其 他 事件 ,如 onmousedown 和 onmouseup,onmousedown 是 
在 鼠标 按 下 时 触发 的 事件 ,onmouseup 是 在 鼠标 松 开 时 触发 的 事件 ,这 两 个 事件 一 般 也 用 
于 鼠标 的 单 击 事件 。 还 有 鼠标 移出 对 象 上 方 时 触发 的 事件 onmouseover 和 鼠标 移 到 对 象 
上 方 的 事件 onmousemove 事件 ,这 两 个 事件 一 般 用 于 鼠标 的 移动 事件 。 
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图 11-2 鼠标 单 击 事件 示例 
【 例 11-3】 获得 鼠标 在 网 页 中 的 X 和 YY 坐标 。 
<! -- 程序 11- 3.html -一 > 


<html> 
<head> 


<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 


<title> 获得 鼠标 在 网 页 中 的 X 和 YY 坐标 </title> 
< script type = "text/javascript" language= "javascript" > 
function getMouse() { 
mouseX = event. x; 
mouseY = event. y; 
x. value = mouseX; 
y. value = mouseY; 
| 
document. onmousemove = getMouse; 
</script > 
</head> 
<body> 
X:< input type = "text" id= "x" size= "4"><br> 
Y:< input type= "text" id= "y" size= "4"> 
</body> 
</html > 








在 本 例 中 ,首先 自 定 义 了 一 个 能 获得 鼠标 在 网 页 中 的 X 和 YY 坐标 的 功能 函数 getMouse()， 
然后 将 其 传 值 给 文档 对 象 的 onmousemove 属性 ,用 document. onmousemove 王 getMouse 
语句 实现 此 功能 ,最 后 在 表单 中 制作 两 个 文本 框 来 显示 鼠标 的 X 和 YY 坐标 , 当 鼠 标 在 页 面 
上 移动 时 ,文本 框 中 的 数据 会 不 断 地 发 生变 化 ,以 显示 当前 鼠标 的 位 置 。 其 浏览 效果 如 

















列 11-3 所 示 。 
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图 11-3 鼠标 移动 事件 示例 


11.2.2 键盘 事件 


键盘 事件 是 在 网 页 操作 中 使 用 最 频繁 的 事件 ,利用 键盘 事件 可 以 实现 页 面 的 快捷 操作 。 
键盘 常见 的 事件 有 onkeyup .onkeydown .onkeypress( 参 见 表 11-1) ,其 中 onkeyup 事件 是 键 
盘 上 的 某 个 键 被 按 下 后 松 开 时 触发 的 事件 ,onkeydown 事件 是 键盘 的 某 个 键 被 按 下 时 触发 
的 事件 ,这 两 个 事件 一 般 可 用 于 组 合 键 的 操作 。onkeypress 事件 一 般 用 于 键盘 的 单 键 操 
作 , 它 表示 键盘 的 某 个 按键 被 按 下 再 释放 时 触发 的 事件 。 

【 例 11-4】 键盘 事件 应 用 。 


<! -- 程序 11 - 4. html --> 
<htm]l > 
<head> 
<meta http - equiv = "Content ~ Type" content = "text/htm1; charset = gb2312" /> 
<title> 键盘 事件 应 用 </title> 
< script type = "text/javascript" language = "javascript" > 
function refreash( ){ 
if(window. event. keyCode = 98){ 
location. reload( ); 
! 
| 
document. onkeypress = refreash; 
</script > 
</head> 
<body> 
< img src = "img/1. jpg" width= "200" height = "150"> 
</body> 
</html > 





本 例 实现 的 功能 是 按 下 键盘 中 的 B 键 ,实现 页 面 的 刷新 ,浏览 效果 如 图 11-4 所 示 。 在 
代码 中 先 定义 一 个 按 下 键盘 中 的 B 键 能 实现 页 面 刷新 的 功能 函数 refreash() ,然后 将 其 传 
值 给 文档 对 象 的 onkeypress 属性 ,用 document. onkeypress 王 refreash 语句 实现 此 功能 。 
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图 11-4 键盘 事件 应 用 示例 
11.2.3 表单 事件 


是 当 某 个 元 素 获 得 焦点 时 触发 的 事件 ,失去 焦点 事件 (onBlur) 是 当 某 个 元 素 失 去 焦点 时 触 
发 的 事件 ,在 通常 情况 下 ,它们 是 同时 结合 使 用 的 。 而 失去 焦点 修改 事件 (onChange) 是 当 
前 元 素 失 去 焦点 并 且 元 素 的 内 容 发 生 改变 时 触发 的 事件 ,还 有 文本 选中 事件 (onSelect) 在 
当 文本 框 或 文本 域 中 的 内 容 被 选中 时 触发 。 

【 例 11-5】 表单 事件 应 用 。 





<l== 程 序 11~5.hbtal ==> 
<html> 
<head> 
< meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 表 单 事件 应 用 </title> 
<script> 
function aihao( ){ 


alert(" 选择 成 功 !") 





} 
</script> 
</head> 
<body> 
< script type = "text/javascript" language= "javascript"> 视频 讲解 
</script> 
<form> 
< input type = "text" name = "change" value = "a" 
onChange = alert(" 内 容 已 被 改动 !") 
onSelect =alert(" 内 容 已 被 选择 !")></text > 
</form> 
<hr /> 
请 选择 自己 的 兴趣 爱好 : <br> 
< form > 


< select name = "gushi" onFocus = "aihao()"> 
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<option> 体 育 </option> 
<option> 音 乐 </option> 
<option > 美术 </option> 
<option > 其 他 </option> 
</select> 
</form> 
</body> 
</html > 


本 例 的 浏览 效果 如 图 11-5 所 示 ,在 本 例 中 演示 了 表单 的 3 个 事件 , 当 文 本 框 中 的 文字 
改变 时 ,触发 onChange 事件 ,弹出 提示 框 ,如 图 11-6 所 示 。 当 选择 文本 框 中 的 内 容 时 ,触发 
onSelect 事件 ,弹出 提示 框 , 如 图 11-7 所 示 。 在 网 页 中 还 设置 了 一 个 下 拉 列 表 框 , 当 其 获得 
聚焦 时 ,onFocus 事件 调用 的 程序 被 执行 ,如 图 11-8 所 示 。 
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11-7 触发 onSelect 事件 图 11-8 和 触发 onFocus 事件 


表单 事件 中 除 上 述 事件 外 ,使 用 更 多 的 事件 还 有 表单 提交 事件 和 表单 重 置 事件 。 表 单 
提交 事件 是 在 用 户 提交 表单 时 触发 的 事件 。 通 常 该 事件 用 来 验证 用 户 在 表单 中 输入 的 内 容 
是 否 正 确 , 如 果 不 正确 ,那么 该 事件 可 以 返回 相应 信息 阻止 表单 的 提交 。 表 单 重 置 事件 主要 
是 将 表单 中 的 内 容 设 置 为 初始 值 。 该 事件 主要 用 于 清空 表单 中 的 文本 内 容 。 

【 例 11-6】 密码 修改 程序 。 





<! -- 程序 11 - 6. html -一 > 

< htm]l > 

< head> 

<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 用 户 密 码 修改 </title> 


</head> 
<body> 
< script language= "javascript"> 
function rec(form) { 
var a= form.textl1.value; 
var b= form. textf. value; 


Var c= form. texts. value; 


if(c==b) 
alert(" 恭 喜 您 修改 成 功 !"); 
else 


alert(" 对 不 起 密码 与 确认 码 不 一 致 1"); 





1 
function re(form) { 
form, text1. value = ""; 
form. textf. value= ""; 
form. texts. value = ""; 
9 
</script > 
<form> 
< table width= "321" border = "1"> 
<tr>< td colspan = "3"> 用 户 密码 修改 </td> </tr> 
<tr> 
<td width= "1"> gnbsp;</td> 
<tdwidth= "119"> 旧 密码 : </td> 
<td width = "179">< input type = "password" name = "text1"></td> 
</tr> 
<tr> 
<td> gnbsp;</td> 
<td> 新 密码 : </td> 
<td>< input type = "password" name = "textf"></td> 
</tr> 
<tr> 
<td> gnbsp;</td> 
<td> 重 新 输入 密码 : </td> 
<td>< input type = "password" name = "texts"></td> 
</tr> 
~ Er 
<td> gnbsp;</td> 
< td>< input type = "button" name= "button" value = "提交 " onclick = "rec(this. form)"></td> 
<td>< input type = "reset" name = "reset" value = " 重 置 " onclick = "re(this. form)"></td> 
</tr> 


</table> 
</form> 
</body> 第 
</html > | 
于 
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本 例 通 过 定义 有 参 函 数 ,并 使 用 让 语句 做 判断 , 当 输 入 的 新 密码 与 重新 输入 的 一 致 时 ， 
单 击 “ 提 交 ” 按 钮 ,触发 表单 提交 事件 ,调用 函数 rec(this. form) ,弹出 提示 框 ,如 图 11-9 所 
示 , 当 单 击 * 重 置 ? 按 钮 时 ,触发 表单 重 置 事件 ,调用 函数 re(this. form) ,将 文本 框 清空 。 





























11-9 密码 修改 程序 示例 


11.3 event 对 象 


event 的 中 文 意思 即 为 事件 ,在 JavaScript 中 它 代表 事件 状态 ,如 事件 发 生 的 元 素 、 键 盘 
状态 ,鼠标 位 置 和 鼠标 按钮 状态 等 。 一旦 在 HTML 文档 中 触发 了 某 个 事件 , 即 会 生成 
event 对 象 ,如 单 击 一 个 按钮 ,浏览 器 的 内 存 中 就 产生 相应 的 event 对 象 。 


11.3.1 event 对 象 的 属性 


在 HTML 文档 中 触发 某 个 事件 时 ,event 对 象 将 被 作为 参数 传递 给 该 事件 的 处 理 程 
序 ,而 这 个 event 对 象 需 用 window. event 或 event 来 引用 , 且 event 对 象 只 在 事件 发 生 的 过 
程 中 才 有 效 。 

event 的 某 些 属性 只 对 特定 的 事件 有 意义 ,如 fromElement 和 toElement 属性 只 对 
onmouseover 和 onmouseout 事件 有 意义 。 不 同 的 浏览 器 对 event 对 象 的 定义 不 同 , 属 性 也 
有 区 别 ,IE 的 event 对 象 属性 主要 包括 以 下 几 个 。 

(1) type: 指 事件 的 类 型 , 即 HTML 标签 属性 中 没有 on 前 级 之 后 的 字符 串 , 如 Click 
就 代表 单 击 事件 。 

(2) srcElement: 事件 源 , 即 发 生 事件 的 元 素 , 如 标签 < a ></a > 中 a 这 个 链接 就 是 事件 
发 生 的 源头 ,也 就 是 该 事件 的 srcElement( 非 IE 中 用 target) 。 

(3) button: 声明 被 按 下 的 鼠标 键 ,其 返回 值 为 一 个 整数 。0 代表 没有 按键 ,1 代表 鼠标 
左 键 ,2 代表 鼠标 右键 ,3 代表 左右 键 同 时 按 下 ,4 代表 鼠标 的 中 间 键 ,如 果 按 下 了 多 个 鼠标 
键 ,就 把 这 些 值 加 在 一 起 。 

(4) clientX/clientY: 指 事件 发 生 时 ,鼠标 的 横 、 纵 坐标 ,返回 整数 ,其 值 是 相对 于 包容 
窗口 的 左上 角 生 成 的 。 

(5) offsetX/offsetY: 指 鼠 标 指针 相对 于 源 元 素 的 位 置 , 可 确定 单 击 Image 对 象 的 哪个 
像素 。 

(6) altKey/ctrlKey/shiftKey: 这 些 属性 指 鼠 标 事件 发 生 时 是 否 同 时 按 住 了 Alt 键 、 











Ctrl 键 或 Shift 键 , 返 回 一 个 布尔 值 。 

(7) keyCode: 返回 keydown 和 keyup 事件 发 生 时 按键 的 代码 及 keypress 事件 的 
Unicode 字符 ,如 event. keyCode 王 13 代表 按 下 了 Enter 键 。 

(8) fromElement\toElement: 前 者 指 代 mouseover 事件 移动 过 的 文档 元 素 ,后 者 指 代 
mouseout 事件 中 鼠标 移动 到 的 文档 元 素 。 

(9) cancelBubble: 布尔 属性 ,用 于 检测 是 否 接受 上 层 元 素 的 事件 的 控制 。 返 回 值 为 
true 代表 不 被 上 层 元 素 的 事件 控制 ,返回 值 为 false 则 代表 允许 被 上 层 元 素 的 事件 控制 。 

专家 点 拨 : IE 中 事件 的 起 泡 是 指 IE 中 事件 可 以 沿 着 包容 层次 一 点 点 起 泡 到 上 层 , 也 
就 是 说 ,下 层 的 DOM 节点 定义 的 事件 处 理 函 数 ,到 了 上 层 的 节点 如 果 还 有 和 下 层 相同 事件 
类 型 的 事件 处 理 函数 , 则 上 层 的 事件 处 理 函 数 也 会 执行 ,如 在 < div > 标签 中 若 包 含 了 <a >， 
如 果 这 两 个 标签 都 有 onclick 事件 的 处 理 函 数 ,那么 执行 的 情况 就 是 先 执行 < a > 标签 的 
onclick 事件 处 理 函 数 , 再 执行 < div > 的 事件 处 理 函 数 。 如 果 希 望 < a > 的 事件 处 理 函 数 执行 
完毕 之 后 ,不 再 执行 上 层 < div > 的 onclick 事件 处 理 函 数 , 就 把 cancelBubble 设置 为 false 
即 可 。 

(10) returnValue: 布尔 属性 ,设置 是 否 可 以 阻止 浏览 器 执行 默认 的 事件 动作 , 值 为 true 
时 不 能 阻止 , 值 为 false 时 则 可 以 阻止 ,相当 于 < a href=="#" onclick 二 "ProcessMethod(); 
return false;"/>。 

由 于 srcElement 属性 返回 的 是 触发 事件 的 对 象 ,因此 event 对 象 的 其 他 属性 也 可 以 在 
事件 处 理 程序 中 读 取 。 

【 例 11-7】 event 属性 的 应 用 。 





<! -- 程序 11- 7.html --> 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> event 属性 的 应 用 </title> 
< script type = "text/javascript"> 
function Event(x){ 
var txt; 
switch(x){ 
Casel1l: 
txt = event. srcElement. name+ 中 发 生 了 " + event.type + "事件 】"; 
break; 
Case 2: 
txt = event. srcElement. name+ "〖【 发 生 了 "+event.type+ "事件 】"; 
txt += "<br /> 上 一 个 对 象 是 : " + event. fromElement. name; 
break; 
] 
document. getElementById("txt"). innerHTML = txt; 
. 
</script > 
<style type = "text/css"> 
井 txt{f font - weight :bold;} 
</style> 
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</head> 

<body> 

提示 文字 : < span id= "txt"></span> 

<hr /> 

< input type = "text" id= "a" name= "文本 输入 框 ” onfocus = "Event(1);" /> 

< button name = "按钮 元 素 " onmouseover = "Event(2);" onclick= "Event(1);"> 按 钮 元 素 </button> 
</body> 

</html > 


本 例 可 对 事件 发 生 的 元 素 进行 显示 ,浏览 效果 如 图 11-10 所 示 。 在 本 例 中 没有 传递 
this 参数 ,而 是 通过 event 对 象 的 srcElement 属性 获取 事件 对 象 和 事件 名 称 , 并 获取 该 对 象 
的 所 有 值 , 另 外 本 例 中 还 使 用 了 fromElement 属性 ,在 使 用 onmouseover 事件 时 可 找到 上 
个 对 象 。 
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图 11-10 event 属性 的 应 用 示例 


有 了 丰富 的 事件 属性 ,使 得 编写 网 页 程序 更 加 轻松 ,特别 是 对 事件 有 了 监视 的 功能 , 利 
用 event 对 象 可 检测 网 页 上 用 户 的 鼠标 信息 ,键盘 按键 信息 等 。 
11.3.2 检测 鼠标 信息 


使 用 event 对 象 检测 用 户 的 鼠标 情况 需 编 写 onmouseover 事件 的 处 理 程序 。 
【 例 11-8】 用 户 的 鼠标 检测 。 





<! -- 程序 11 - 8.html --> 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 用 户 鼠 标的 检测 </title> 
< script type = "text/javascript"> 
function Event(x){ 
Var txt; 
Switch(x){ 
Case 1: 
txt= "鼠标 位 置 为 【" + event. srcElement. name+ "】" + "< br> 鼠 标的 坐标 为 【" + event. clientX+","+ 
event.clientY + "】": 
document. getElementById("pos"). style. posLeft = event. clientX + 10; 
document. getElementById("pos"). style. posTop = event. clientY + 10; 


break; 
} 
document. getElementById( "txt"). innerHTML = txt; 
} 
</script > 
< style type = "text/css"> 
all{height:600px;cursor:crosshair;} 
#3txt{font - weight :bold;} 
3pos{width:140px; height:20px; 
background: # fafafa; 
border:1px dotted #333; 
position:absolute; 
top:0px; left:Opx; 





</style> 
</head> 
< body onmousemove = "Event (1);"> 
<div id= "all" name= "主体 div 元 素 "> 
<div id= "pos"> 跟 随 鼠 标 文字 内 容 </div> 
提示 文字 : < span id= "txt"></span><hr /> 
< input type = "text”id= "a" name= "文本 输入 框 " /> <br /> 
< button name = "按钮 元 素 "> 按 钮 元 素 </button> 
</div> 


</body> 
</html > 


本 例 使 用 了 event. clientX 和 event. clientY 检测 鼠标 位 置 , 并 把 鼠标 body 内 的 坐标 值 
和 所 在 元 素 显 示 在 提示 文字 ,由 于 < body > 标签 使 用 了 onmousemove 事件 ,只 要 用 户 的 鼠 
标 在 文档 范围 内 移动 , 即 立 刻 触 发 事件 并 执行 相应 的 处 理 程序 , 故 鼠 标的 坐标 值 会 随 着 鼠标 
的 移动 而 不 断 变化 。 本 例 的 浏览 效果 如 图 11-11 所 示 。 
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图 11-11 用 户 鼠 标的 检测 
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11.3.3 检测 用 户 的 键盘 按键 信息 


event 对 象 中 的 altKey、ctrlIKey、shiftKey 及 keyCode 可 检测 键盘 的 按键 信息 ,通过 不 
同属 性 的 读 取 ,event 对 象 可 以 明白 浏览 用 户 的 意图 ,其 中 keyCode 代表 按键 的 Unicode 代 
码 ,每 个 代码 都 代表 键盘 上 唯一 的 按键 。 

【 例 11-9】 键盘 按键 检测 。 








<html > 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title > 键盘 按键 检测 </title> 
< script type = "text/javascript"> 
Tt 
var txt2=""; 
function Event(x){ 
var obj = document. getElementsByName(" intxt"); 
switch(x){ 
case 1: txt = "可 视 按 键 的 Unicode 代码 为 : " + event.keyCode; break; 
Case 2: 
txt = " 非 可 视 按键 (Ctrl、Alt、Shift) 的 Unicode 代码 为 : " + event. keyCode; 
txt2 = " 非 可 视 按键 信息 : <br /> Alt: " + event.altKey+ "< br />Ctrl: " +event.ctrlKey+ 
"<br /> Shift: " + event. shiftKey; 
break; 
Case 3: 
txt += String. fromCharCode( event. keyCode); 
if(event.keyCode == 13){ 
event. srcElement. blur(); 
obj[2]. focus(); 
: 
break; 
case 4: 
xt es 
break; 
Case 5: 
txt = "焦点 移 到 按钮 上 了 了 。Wh("; 
break; 
. 
document. getElementById( "txt"). innerHTML = txt; 
document. getElementById( "txt2"). innerHTML = txt2; 
} 
</script > 
<style type = "text/css"> 
# txt{font - weight :bold;} 
</style> 
</head> 
<body> 
<div id= "all"> 
< input type = "text" name = "intxt" onkeypress = "Event(1);" onkeydown = "Event(2);" /><hr /> 





提示 文字 : < span id= "txt"></span><br /> 
提示 文字 : < span id= "txt2"></span><hr /> 
< input type = "text" name = "intxt" onkeypress = "Event(3);" onfocus = "Event(4);" /><br /> 
< input type = "button" name = "intxt" onfocus = "Event(5);"”value = "确定 " /> 
</div> 
</body> 
</html > 


本 例 提供 了 访问 HTML 元 素 的 新 方法 , 即 document. getElementsByName() ,该 方法 
根据 元 素 的 name 名 称 访问 元 素 ,但 与 getElementById 不 同 , 它 在 文档 内 可 以 有 多 个 和 
name 名 称 相 同 的 元 素 , 所 以 getElementsByName() 方 法 返回 值 为 数组 ,通过 下 标 访问 每 个 
name 名 称 的 元 素 。 第 一 个 文本 框 按 下 可 视 按键 时 ,触发 onkeypress 和 onkeydown 事件 , 提 
示 文 字 内 容 将 会 通过 读 取 event. keyCode 属性 代码 值 。 而 按 下 非 可 视 按键 时 两 段 提 示 文 字 
内 容 将 显示 3 个 布尔 值 ,分 别 表示 Alt 键 .Ctrl 键 和 Shift 键 是 否 被 按 下 ,浏览 效果 如 图 11-12 
所 示 。 
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提示 文字 非 可 视 按键 (Ctrl、Alt、 
Shift) 的 Unicode 代 码 为 18 
提示 文字 ， 非 可 视 按键 信息 ， 

Alt: true 

Ctrl: false 

Shift: false 








图 11-12 键盘 输入 字符 检测 


第 二 个 文本 框 在 输入 字符 时 ,调用 字符 串 对 象 的 String. fromCharCode( ) 方 法 ,将 按键 
的 Unicode 代码 转换 为 对 应 的 字符 , 即 用 户 输入 什么 字符 ,提示 文字 将 显示 一 样 的 字符 。 且 
当 用 户 在 第 二 个 文本 框 中 按 下 Enter 键 时 ,文本 框 将 失去 焦点 ,并 将 焦点 移 人 “确定 ”按钮 ， 
读者 可 自行 运行 测试 。 

专家 点 拨 : 非 可 视 按 键 是 指 Alt 键 \Ctrl 键 和 Shift 键 ` 上 下 左右 光标 键 等 。 


11.4 上 机 练习 与 指导 


11.4.1 改变 网 页 背景 颜色 
第 


根据 单 选 按钮 的 属性 及 事件 ,本 节 练 习 通 过 单 击 事件 改变 网 页 的 背景 颜色 ,程序 的 效果 | 11 
图 如 图 11-13 所 示 , 在 网 页 上 设计 一 个 有 4 个 单 选 按 钮 的 表单 ,每 个 单 选 按钮 代表 一 种 颜 | 章 
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色 , 当 单 击 某 个 颜色 的 单 选 按钮 时 ,网 页 的 背景 色 会 改 成 相应 的 色彩 
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11-13 改变 网 页 的 背景 颜色 效果 图 
参考 代码 如 下 : 


<! -- 上 机 练习 11- 1.html--> 
< htm]l > 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> JavaScript 中 改变 网 页 背景 颜色 表单 事件 </title> 
< script type = "text/javascript”language= "javascript" > 
function changeColor() { 
for(i=0;i<4;it+) 
if(forml.color[i].checked){ 
document. body. style. background = forml. color[ i]. value; 
} 
</script > 
</head> 
<body> 
<form name = "forml"> 
< input name = "color" type= "radio" value = "#FFFFFF" onclick = "changeColor()"> 白 色 
< input name = "color" type= "radio" value = " 间 0000FF" onclick = "changeColor()"> 蓝 色 
< input name = "color" type= "radio" value = " 间 00FF00" onclick = "changeColor()"> 绿 色 
< input name = "color" type= "radio" value = "#FFFF00" onclick= "changeColor()"> 黄 色 
</form> 
</body> 
</html > 


上 面 的 代码 中 先 自 定义 了 一 个 运算 功能 的 函数 changeColor() ,然后 根据 forml. color[ 订 . 
value 设 定 不 同 的 颜色 值 选 中 单 选 按钮 forml. color[i]. checked, 并 通过 document. body. 
style. background 设置 背景 颜色 。 


11.4.2 表单 中 相关 组 件 的 算术 运算 
本 节 根 据 文本 框 及 按钮 的 属性 事件 ,编写 一 个 简单 的 计算 器 程序 ,其 程序 的 效果 图 如 








图 11-14 所 示 ,要求 在 “数据 1” 及 “数据 2” 的 文本 框 中 输入 数值 后 , 单 击 “ 加 ”“ 减 “ 乘 “ 除 ” 
任 一 按钮 ,都 能 将 相应 的 运算 结果 显示 在 “运算 结果 ”的 文本 框 中 。 











简单 的 计算 回 -Windows I... [- | 口 | 凤 | 
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名 加 ”| 有 旧 \ 上 竹 1-2 hl 图 如 |[x] 
究 收 京 天 。 | 大 简单 的 计划 器 国 











数据 1: [一 ] 


数据 2: [  ] 
加 ] [|] 困 
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图 11-14 简单 计算 器 效果 图 
参考 代码 如 下 : 


<! -- 上 机 练习 11- 2. html 一 一 > 
<htm]l xmlns = "http://www. w3. org/1999/xhtml"> 
<head> 
<meta http - equiv = "Content - Type" content = "text/htm1; charset = gb2312" /> 
<title> 简单 的 计算 器 </title> 
< script type = "text/javascript" language= "javascript" > 
function equal(e){ 
datal = forml. datal. value; 
data2 = forml. data2. value; 
switch(e) { 
case "+":total = datal * 1 + data2 * 1;break; 
case" —":total = datal - data2; break; 
case " * ":total = datal * data2; break; 
case "/" :total = datal/data2; break; 
} 
forml. total. value = total; 
1 
</ script> 
</head> 
<body> 
< form name = "forml"> 
<p> 数 据 1: < input type = "text" size=5 name = "datal"> </p> 
<p> 数 据 2: < input type = "text" size=5 name= "data2"> </p> 


<p> 
< input type = "button" value = "加 " onclick= "equal(' +')"> 
< input type = "button" value = " 减 " onclick= "equal(' - ')"> 





< input type = "button" value = " 乘 " onclick= "equal(' *')"> 
< input type = "button" value = " 除 " onclick= "equal('/')"> 
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</p> 


<p> 运算 结果 : < input type = "text" name = "total" size=5></p> 


</form> 
</body> 
</html > 


上 面 的 代码 中 先 自 定义 一 个 运算 的 功能 函数 equal(e) ,然后 取得 要 计算 的 两 个 数据 ,在 
switch 语句 中 根据 不 同 的 计算 方法 (加 、 减 、 乘 、 除 ) 使 用 不 同 的 运算 符 来 计算 这 两 个 数 运算 
的 结果 ,在 该 程序 中 有 这 样 的 语句 组 “case "十 ":total 王 datal * 1 十 data2 * 1;break;”, 主 要 
原因 是 运算 符 "十 "可 以 做 加 法 ,也 可 以 做 字符 串 的 连接 符号 ,为 了 使 两 个 数据 做 加 法 运算 ， 


所 以 datal 和 data2 要 乘 以 1。 
11.4.3 饼 标 随意 拖 动 网 页 元 素 


根据 鼠标 跟随 文字 的 经 验 ,结合 前 面 学 习 的 鼠标 事件 ,本 节 练 习 制 作 一 个 鼠标 随意 拖 动 


网 页 元 素 的 程序 ,实现 类 似 于 Windows 桌面 对 各 窗口 的 操作 ,不 仅 可 拖 放 div 元 素 , 双 
元 素 时 还 可 显示 或 隐藏 其 文本 内 容 ,程序 效果 图 如 图 11-15 所 示 。 


名 电 标 随意 拖 动 网 页 元 素 - Microsoft Internet Explorer 
文件 EE 编辑 区 ) 查看 Q) 收藏) 工具 〇 ) 和 帮助 00 
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图 11-15 鼠标 随意 拖 动 网 页 元 素 效 果 图 


参考 代码 如 下 : 


B== 此 和 栅 妹 习 1=3. Wl==> 
< html xmlns = "http://www. w3. org/1999/xhtml"> 
<head> 


< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 


<title> 鼠 标 随意 拖 动 网 页 元 素 </title> 
< script type = "text/javascript"> 

Var drag = false; 

var dis= false; 

function Event(x){ 


var lf = document. getElementById("pos"). style. posLeft; 


Var tp = document. getElementById("pos"). style.posTop; 





fi 该 
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<h4 > 标题 </h4 > 
<p> 文 本 内 容 :JavaScript 的 事件 处 理 机 制 可 以 改变 浏览 器 响应 用 户 操作 的 方式 .</p> 
</div> 
</div> 
</div> 
</body> 
</html> 


11.5 本 章 习 题 


一 、 选 择 题 
1. 下 列 不 属于 鼠标 事件 的 是 ( F; 

A. onDbclick B. onMouseDown C. onMouseUp D. onMove 
2. 下 列 与 按钮 有 关 的 事件 是 ( ) 。 

A. onReset B. onChange C. onLoad D. onBlur 
3. 下 列 属于 键盘 按 下 事件 的 是 ( 。”)。 

A. onKeydown B. onKeyup C. onKeypress D. onClick 
4. 当 某 个 元 素 失去 焦点 时 触发 的 事件 是 i 

A. onChange B. onLoad C. onBlur D. onReset 
二 、 填空 题 
1. JavaScript 脚本 处 理事 件 主要 可 通过 匿名 函数 、 等 方式 进行 。 
2. JavaScript 和 面向 对 象 的 编程 一 样 必须 要 有 才能 执行 程序 。 
3, 在 JavaScript 中 代表 事件 状态 。 
4. 使 用 event 对 象 检 测 用 户 的 鼠标 情况 , 需 编 写 事件 的 处 理 程序 。 











第 12 章 综合 实例 


前 面 的 章节 分 别 介 绍 了 HTML、CSS 及 JavaScript 的 各 种 应 用 方法 ,本 章 将 以 一 个 简 
单 的 门户 网 站 为 例 ,综合 前 面 各 章 的 概念 .技术 及 方法 ,将 其 运用 到 实际 应 用 中 ,使 读者 对 网 
页 制作 的 过 程 及 方法 有 更 深刻 的 理解 。 

本 章 主要 内 容 如 下 。 

。 规划 网 站 结构 。 

。 网 站 开发 。 

。 网 站 发 布 要 素 。 








12.1 网 站 开发 流程 


做 任何 项 目 都 需要 提前 进行 规划 ,优秀 网 站 的 开发 需要 有 一 个 好 的 开发 流程 ,通常 需 遵 
循 以 下 流程 : 网 站 规划 、 网 站 设计 、 网 站 开发 、 网 站 发 布 .网 站 维护 等 。 首 先 需 要 从 大 局 出 
发 ,进行 完整 的 需求 分 析 , 然 后 才 考 虑 效果 图 样 和 具体 的 代码 编写 。 本 章 内 容 为 相对 比较 简 
单 的 门户 网 站 ,虽然 结构 不 算 复杂 .但 网 站 的 规划 是 不 可 省 略 的 ,以 许多 的 实际 项 目 中 做 好 
网 站 的 规划 能 提高 开发 的 效率 。 


12.1.1 网 站 规划 


网 站 规划 是 指 在 网 站 建设 前 对 市 场 进行 分 析 、 确 定 网 站 的 目的 和 功能 ,并 根据 需要 对 网 
站 建设 中 的 技术 ,内容 、 费 用、 测试 维护 等 做 出 规划 。 网 站 规划 对 网 站 建设 起 到 计划 和 指导 
的 作用 ,对 网 站 的 内 容 和 维护 起 到 定位 作用 。 

一 个 网 站 的 成 功 与 否 与 建站 前 的 网 站 规划 有 着 极为 重要 的 关系 。 在 建立 网 站 前 应 明确 
建设 网 站 的 目的 ,确定 网 站 的 功能 ,确定 网 站 规模 、 投 入 费用 ,进行 必要 的 市 场 分 析 等 。 只 有 
详细 的 规划 ,才能 避免 在 网 站 建设 中 出 现 的 很 多 问题 ,使 网 站 建设 能 顺利 进行 。 一 般 而 言 ， 
网 站 规划 包括 如 下 内 容 。 

(1) 确定 网 站 主题 : 建立 网 站 之 前 ,必须 先 弄 清 建 立 网 站 的 目的 是 什么 。 

(2) 进行 需求 分 析 : 以 用 户 体验 的 角度 去 看 问题 ,分 析 潜在 的 用 户 目标 ,了 解 用 户 的 需 
求 是 什么 ,了 解 用 户 想 从 网 站 上 得 到 什么 信息 。 

(3) 确定 网 站 风格 : 确定 网 站 的 风格 也 就 确定 了 网 站 内 容 的 表现 形式 。 虽 然 现 今 互联 
网 上 的 网 站 多 如 牛 毛 ,但 总 体 来 说 只 有 信息 式 和 图 画 式 两 大 类 ,信息 式 是 在 网 页 显示 中 以 发 
布 文字 信息 为 主 ,图 画 式 则 是 在 网 页 中 以 图 片 或 动画 为 主 。 

(4) 网 站 技术 问题 : 在 制作 网 页 前 还 必须 考虑 网 络 速度 的 问题 ,同时 还 要 分 析 投 入 成 
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本 、 功 能 、 开 发 .稳定 性 和 安全 性 等 。 

本 章 所 介绍 的 门户 网 站 是 描述 大 型 综合 性 网 站 的 通用 概念 , 除 新 闻 以 外 ,还 有 博客 、 专 
题 ,论坛 等 ,实现 这 么 多 复杂 的 内 容 需 要 服务 器 编程 和 数据 库 技术 ,因为 本 书 只 学 习 网 页 前 
面 的 表现 技术 ,所 以 本 章 只 介绍 制作 门户 网 站 的 基本 网 页 。 

门户 网 站 看 似 复杂 ,实际 仍然 是 有 规律 的 分 层 管理 的 模型 ,本章 制 作 一 个 较 简 单 的 门户 
网 站 ,其 结构 分 为 3 层 , 效 果 如 图 12-1 所 示 。 由 于 本 书 没有 涉及 服务 器 端 编程 ,因此 示例 中 
的 动态 部 分 由 静态 页 面 模拟 完成 。 


























网 站 主页 
1 
栏目: 页 | | 栏 E 责 栏目 :页 
f | 














12-1 门户 网 站 的 整体 结构 图 





图 12-1 列举 了 3 个 栏目 ,每 个 栏目 列举 了 3 个 文章 页 面 ,实际 上 门户 网 站 的 实际 栏目 
可 能 非常 多 ,但 模型 都 基本 相同 。 很 多 简单 门户 网 站 的 多 个 栏目 主页 除了 内 容 不 同 , 布 局 样 
式 基本 相同 ,这 样 的 网 站 栏目 页 面 其 实 只 有 一 个 文件 ,通过 服务 器 编程 读 取 数据 库 生 成 多 个 
不 同 的 栏目 页 面 .文章 内 容 页 面 同样 如 此 。 

本 章 将 学 习 制 作 主页 ,栏目 页 和 文章 内 容 页 ,有 了 这 3 个 页 面 , 通 过 后 台 程序 的 操作 可 
以 生成 一 个 完整 的 门户 网 站 。 


12.1.2 网 站 设计 


网 站 建设 初期 进行 了 详细 的 规划 之 后 ,就 可 以 进入 设计 阶段 。 设 计 阶 段 就 是 对 网 页 元 
素 的 合理 摆 放 和 布局 ,在 进行 页 面 设计 时 ,首先 要 充 














网 站 Logo 及 广告 分 考虑 到 导航 系统 对 整个 网 站 的 影响 ,其 实 要 考虑 
网 站 导航 条 网 页 的 颜色 ,在 制作 的 过 程 中 需要 设计 文本 、 字 体 、 
页 面 主体 内 容 背景 等 ,因此 设计 时 要 注意 以 下 两 点 。 


(1) 一 致 性 : 确定 一 种 颜色 为 网 站 的 主 色调 ,最 
好 在 所 有 的 页 面 中 都 使 用 该 主 色调 保持 一 致 风格 。 

(2) 可 读 性 : 网 页 设计 不 需要 做 得 很 花 俏 ,不 需 
要 有 太 多 的 修饰 ,因为 绝 大 多 数 的 用 户 都 是 在 网 站 
上 查找 自己 需要 的 信息 ,所 示 在 制作 网 页 时 ,一 定 要 
注意 网 站 的 可 读 性 。 

本 例 网 站 的 首页 .栏目 页 和 文章 内 容 页 类 似 于 个 
人 网 站 ,拥有 相同 的 顶部 .导航 栏 和 底部 ,如 图 12-2 
版 权 信息 所 示 。 
因为 门户 网 站 的 首页 一 般 是 把 最 新 .最 重要 的 
图 12-2 门户 网 站 页 面 的 结构 图 内 容 放 在 顶部 ,所 以 首页 大 多 显示 各 个 栏目 的 文章 














标题 列表 ,因此 在 网 页 的 设计 中 ,ul 列表 元 素 使 用 非常 频繁 。 
12.1.3 页 面 设计 效果 图 


本 例 页 面 设 计 效 果 图 使 用 Photoshop 软件 制作 ,效果 图 设计 时 需要 考虑 代码 的 编写 复 
杂 度 和 载 人 图 片 的 总 体积 ,如 可 用 纯色 就 不 用 渐变 色 , 可 用 渐变 色 就 不 用 无 规律 图 片 , 因 为 
纯色 可 直接 用 代码 指定 ,渐变 色 须 使 用 图 片 ,但 渐变 色 只 需要 1 像素 宽 ( 垂 直 渐 变 ) 的 图 片 作 
为 容器 背景 平 铺 , 相 对 而 言 比 无 规律 图 片 像 素数 量 少 很 多 。 

本 网 站 效果 图 使 用 了 红色 .灰色 及 黑色 ,比较 容易 吸引 浏览 者 的 注意 ,读者 可 以 作为 参 
考 , 其 效果 图 如 图 12-3 所 示 。 
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图 12-3 门户 网 站 首页 设计 效果 图 


12.1.4 站 点 目录 规划 第 
由 于 Web 开发 是 多 种 技术 .多 种 资源 的 集合 ,在 编写 代码 前 ,必须 对 站 点 的 目录 进行 规 | 12 
有 
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划 , 如 果 没有 良好 的 目录 规划 ,在 大 型 项 目 中 设计 师 将 很 难 厘 清 代码 。 

在 学 习 HTML 时 已 经 知道 ,创建 一 个 网 站 需要 独 
立 的 网 站 根 目录 , 且 其 中 除了 各 HTML 文档 外 ,还 有 很 
f f 1 。 多 资源 文件 。 在 创建 网 站 目录 时 ,需要 按 类 别 创建 相应 
sf | | img| | i cs | 的 资源 子 目录 ,需要 创建 的 目录 用 于 存放 图 片 文件 、 
Flash 动画 文件 .CSS 文件 及 JavaScript 文件 。 本 例 资 
源 目录 的 规划 如 图 12-4 所 示 。 


12.2 网 站 开发 


网 站 设计 完成 之 后 ,下 一 步 就 是 网 页 的 具体 开发 阶段 ,此 阶段 是 网 页 设计 的 最 重要 阶 
段 ,前 期 的 规划 和 设计 都 是 为 网 站 开发 服务 的 ,需要 将 收集 的 资料 进行 整理 和 合理 的 布局 ， 
添加 网 页 中 需要 用 到 的 元 素 。 


12.2.1 构建 XHTML 结构 


有 了 设计 的 效果 图 , 接 下 来 就 需要 构建 XHTML 页 面 的 结构 ,然后 用 CSS 代码 进行 布 
局 ,并 设置 初步 的 样式 属性 。 

由 于 全 站 页 面 的 项 部 和 项 部 样式 与 内 容 保持 一 致 ,本 例 将 网 站 公共 部 分 的 CSS 代码 分 
离 放 人 了 专门 的 外 部 样式 表 文 件 style. css 中 。 其 代码 如 下 : 








网 站 根 目录 












































图 12-4 规划 资源 目录 

















<! -- 程序 style.css --> 

# {margin:0px; padding:0px;} 

ul{list— style:none;} 

body{font - size:12px; } 

提 top{width:100 % ; height:26px; 

color:#fff;background: #000;} 

提 top div{width:60 % ; height:18px; 
padding — top:3px; 
margin— left:8%; 
overflow: hidden; } 

# top div input{height:14px; 

margin— left:5px;} 
select{ height :18px;} 

井 top div .btn{height:20px;} 

井 ad, 井 nav, 井 content, # bottom{width:801px; 

margin:0px auto;} 

#ad{height:65px;} 

提 ad #1logo{width:144px; height:55px; 
float: left; margin:S5px; 
background: #ccc;} 

提 ad 提 swf{width:630px; height:55px; 
margin— left:8px; margin ~ top:5px; 
float: left; 
background: 提 ccc;} 

#nav{height:28px; 

text ~ align:right; 


本 例 首 页 初始 结构 文件 代码 index. html 如 下 : 
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<a href = " 间 "> 分 类 </a> 
<a href = " 间 "> 投 资 </a> 
<a href = " 间 "> 文 娱 </a> 
<a href = " 井 "> 房 产 </a> 
<a href = " 井 "> 教 育 </a> 
<a href = " 划 "> 健 康 </a> 
<a href =" 井 "> 旅游 </a> 
<a href = " 间 "> 美 食 </a> 
<ahref="#">IT</a> 
<a href = " 间 "> 论 坛 </a> 
<div id= "search"> 
< input type = "text" size= "20" value= "" /> 
< input type = "button" value = "搜索 " class = "btn" /></div> 
</div> 
<div id= "content"> 
<div id= "left"> 
<ul class= "pro" id = "news_swf"> </ul> 
<ul class = "pro"> 
<1li class = "tt"><a href = "class. htm" class = "STYLE3"> 热 点 新 闻 </a></1i> 
全 人 让 
<ul> 
<1li class = "gray"> 
‘<a href = "article. htm" class = "STYLE2" > 
<font color = " 井 000000"> 夏 季 一 个 月 电费 670 元 ,相当 半 个 月 工资 </font > 
</a> 
</1i> 
<1i >- 道 路 集中 改造 市 民 出 行 攻略 </1i> 
<1i class = "gray">: 坐 车 凉快 等 车 热 ,乘坐 公交 很 纠结 </1i> 
<1i>: 大 力 发 展 房地产 是 饮 炮 止 渴 </1i> 
<1i class = "gray">: 小 学 生 应 该 多 开心 理 辅导 课 </1i> 
</ul> 
</1i> 
</ul> 
<ul class = "pro"> 
<1li class = "tt"><a href =" 井 "class = "STYLE4"> 时 尚 购物 </a></1i> 
和 
<ul> 
<1i class = "gray">- 我 要 变 成 白雪 公主 那么 白 </1i> 
<1i>: 奢 侈 品 越 涨 价 越 热 卖 </1i > 
<1i class = "gray">: 与 明星 同 款 的 时 尚 裙 裙 </1i> 
<]i>. 鳄鱼 恤 小 店 全 场 打折 了 ~~~! </1i> 
<1i class = "gray">: 创 意 手 工 银 饰 与 您 同行 ! </1i> 
</u> 
</1i> 
</ul> 
<ul class = "pro"> 
<1li class = "tt"><a href =" 井 ”class = "STYLE4"> 生 活 服务 </a></1i> 
> 
<ul> 
<1i class = "gray">: 课 业 家 教 / 艺 术 家 教 </1i> 
<1i>: 搬 家 /快递 /汽车 租赁 </1i> 
<1i class = "gray">- 健 身 /瑜伽 /跆拳道 </1i> 
<1i>-: 婚 庆 / 礼 仪 /鲜花 /摄影 </1i> 
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<div id= "bottom"> 
<h5 > 公司 地 址 : 江西 省 六 大 厦 下 楼 <br /> 
服务 热线 : 0791 - 3100000 转 000 传真 : 0791 -4310000 E-mail: admin@yiluxing.com<br /> 
版 权 所 有 @2005 - 2010 依 路 传媒 <br /> 
散 ICP 备 0000000 号 </h5 > 
</div> 
</body> 
</html> 








本 代码 在 浏览 器 中 的 显示 效果 如 图 12-5 所 示 。 











人 门户 网 站 -首页 - Windows Internet Explorer 
文件 EE 编辑 人 E) 查看 WD 收藏 严 W) 工具 并 ) 帮助 如 


FE 四 ] Ht: \ 实 例 \index. htm Pl 
痪 收 藉 严 “| 税 门户 网 站 -首页 ] 埠 ”页 面 E) 安全 6)- 工具 中- 属 - ” 
用户 EE 7 I G5 


热点 新 闻 

“ 夏季 一 个 月 电费 670 元 ， 相 当 半 个 月 工资 
“道路 集中 改造 市 民 出 行 攻略 

， 坐车 凉快 等 车 热 ， 乘坐 公交 祖 纠 结 

* 大 力 发 展 房地产 是 饮 鸠 止 渴 

"小 学 生 应 该 多 开心 理 辅 导 课 


时 尚 购物 生活 服务 
"我 要 变 成 白雪 公主 那么 白 “ 课业 家 教 /艺术 家 教 


奢侈 品 越 涨 价 越 热 卖 “ 拘 家 /快递 /汽车 租赁 
" 与 明星 同 款 的 时 尚 袖 裙 "健身 /瑜伽 / 耻 闻 道 
， 同色 亿 小 店 全 场 打折 了 ”人 ， 婚 庆 /礼仪 /鲜花 /摄影 
， 创意 手工 银饰 与 您 同行 ! ， 招商 /合作 /融资 /创业 


招聘 求职 亲子 乐园 
"技师 /工人 /学 桂 "影响 孩子 一 生 的 十 五 个 细节 


“行政 /文秘 /助理 “怎么 给 小 孩子 选择 好 的 书籍 
“兼职 /促销 /实习 “ 不 能 用 闪光灯 结 新 生 儿 拍照 
“" 财务/ 会计/ 出纳 “ 宝宝 过 敏 怎 么 办 ? 
"其 他 招聘 “美国 成 功 家 庭 的 教育 妃 语 





公司 地 址 : 江西 省 XX 大 厦 zx 楼 
服务 热线 : 0791-3100000 转 000 传真 : 0791-4310000 E-mail: admain@yiluxing- co 
版 权 所 有 @2005-2010 依 路 传媒 
往 ICP 各 0000000 号 








图 12-5 首页 结构 完成 效果 
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专家 点 拨 : 本 例 代码 在 IE 7.0 以 上 版 本 及 Firefox 浏览 器 中 测试 通过 ,如 果 需 要 兼容 
IE 6.0, 须 对 部 分 CSS 代码 做 兼容 处 理 , 读 者 可 参阅 相关 资料 。 


12.2.2 设置 页 面 疹 景 


制作 完 页 面 的 结构 后 ,首页 视觉 上 已 经 非常 接近 效果 图 了 ,本 节 将 填充 具体 的 内 容 和 图 
片 ,并 做 最 后 的 CSS 代码 美化 ,使 页 面 符 合 设计 效果 图 ,美化 页 面 的 原则 就 是 尽量 用 小 尺寸 
的 图 片 以 节省 页 面体 积 ,并 尽量 用 背景 图 插入 图 片 以 便 能 精确 控制 位 置 。 

1. 输入 所 有 的 标题 和 内 容 

在 首页 的 各 容器 中 填 人 页 面具 体 的 内 容 , 即 标题 ` 列 表 项 文本 和 图 片 等 ,填充 后 的 浏览 
效果 如 图 12-6 所 示 。 
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四 \ 实 Mindex. htn 图 |4|xi| | 外 
御 门 户 网 站 -首页 从 "有 卜 - 口 蝙 ” 页 面 E)- 安 @)- IO 加- “ 


教育 健康 旅游 ”美食 


热点 新 闻 
“ 夏季 一 个 月 电费 670 元 ， 相 当 半 个 月 工资 


“道路 集中 改造 市 民 出 行 攻略 
“， 坐车 闵 快 等 车 热 ， 乖 坐 公交 很 纠 洁 
， 大 力 发 展 房地产 是 饮 灼 止 渴 
“小 学 生 应 该 多 开心 理 辅导 课 


时 尚 购物 生活 服务 

“ 我 要 变 成 白雪 公主 那么 白 “ 课业 家 教 /艺术 宗教 

“" 奢 售 品 越 涨 价 越 热卖 “ 捉 家 /快递 /汽车 租赁 

“与 明星 同 款 的 时 尚福 杨 “ 健身 / 斑 仙 /路 等 道 

， 铝 鱼 仙 小 店 全 场 打 折 了 一? “婚庆 /礼仪 /鲜花 /摄影 
“ 创意 手工 银饰 与 您 同行 ! "招商 /合作 /融资 /创业 


招聘 求职 末了 所 

“ 技 和 /工人 /学 入 “孩子 一 生 的 十 五 个 细节 
“行政 / 文 各 /助理 “怎么 给 小 孩 了 选择 好 的 书 类 
“ 匡 职 /促销 /实习 “不 能 用 闪光 灯 结 新 生 儿 拍照 
“财务 /会 计 / 出 纳 “宝生 过 各 怎么 办 ? 

“其 他 招聘 “美国 达 功 家 应 的 教育 忆 语 


公司 地 址 : 江西 省 XX 大 原 xx 灾 
: 0791-3100000 转 000 传真 : 0791-4310000 E-mail: aduin@yiluxing. com 
版 权 所 有 @2005-2010 依 路 传媒 
芒 ICP 备 0000000 号 








图 12-6 填充 内 容 后 的 首页 


2. 设置 页 面 主体 背景 

从 效果 图 上 可 以 看 到 ,页 面 主 体 背 景 为 阴影 图 片 ,对 于 类 似 的 带 阴 影 背景 ,可 用 如 
图 12-7 所 示 的 图 片 作为 body 元 素 背 景 图 ,设置 背景 垂直 平 铺 并 居中 ,为 了 进一步 减 小 图 片 大 
小 ,可 将 本 图 片 裁剪 为 1 像素 高 度 并 命名 为 bg. gif 放 入 当前 目录 的 img 文件 夹 中 。 注 意 ,在 
CSS 代码 中 一 定 要 指明 repeat-y 平 铺 方式 并 居中 。 在 style. css 中 编写 body 标签 选择 符 如 下 : 























body{font - size:12px; 
background: #fff url(../img/bg.gif) center repeat — y;} 


3. 设置 页 面 渐变 背景 

本 例 首页 的 导航 条 和 栏目 标题 均 为 渐变 背 
景 ,如 图 12-7 所 示 。 

将 效果 图 中 的 背景 渐变 色 裁剪 出 1 像素 宽 ， 12-7 ”功能 标题 板块 背景 
分 别 命名 为 nav_bg. gif 和 pro_bg. gif, 放 入 当前 
目录 的 img 文件 夹 中 。 在 CSS 代码 中 设置 为 相应 容器 的 背景 图 片 ,并 在 水 平方 向 平 铺 , 在 
style. css 中 修改 部 分 编写 如 下 : 








#nav{height :28px; 
text ~ align:right; 
background:url(../img/nav_bg. gif);} 


修改 后 导航 条 背景 将 自动 平 铺 ,栏目 标题 的 背景 设置 需要 在 index. html 的 CSS 代码 部 
分 设置 ,修改 后 的 代码 如 下 : 


井 content 井 left .pro .tt{width:40%; 
height :22px; 
color: #fff; 
padding - bottom:2px; 
text ~ align:center; 
font ~ size:14px; 
font ~ weight: bold; 
padding - top: 5px; 
background: 井 000 url( img/pro_bg. gif);} 


由 于 所 有 的 栏目 标题 容器 部 分 都 指定 了 class 的 名 称 为 tt, 因 此 经 过 上 面 的 设置 后 ,所 
有 的 栏目 标题 都 有 了 渐变 背景 。 

4. 设置 有 规律 的 背景 图 片 

本 例 的 多 处 功能 模块 虽然 不 是 单纯 的 颜色 渐变 背景 ,但 其 背景 图 片 仍然 是 有 规律 的 ,如 
图 12-8 所 示 。 

这 样 的 背景 图 片 仍然 可 用 与 渐变 图 片 相同 的 方法 ,即将 其 裁剪 为 1 像素 宽 的 图 片 ,将 
图 12-8 左边 的 背景 图 片 裁剪 后 命名 为 top_bg. gif, 放 人 
当前 目录 的 img 文件 夹 中 。 在 CSS 代码 中 设置 顶部 容 
12-8 ”顶部 和 “便民 信息 "背景 图 片 ”器 的 背景 并 平 铺 , 在 style. css 中 修改 部 分 编写 如 下 : 
































综合 实例 
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提 top{width:100%; 
height :26px; 
color:#fff;} 














将 图 12-8 右边 的 背景 图 片 裁剪 后 命名 为 li_bg. gif, 放 人 当前 目录 的 img 文件 夹 中。 在 
CSS 代码 中 设置 为 “便民 信息 ”的 背景 并 平 铺 ,在 index. html 中 需 修改 的 CSS 部 分 编写 如 下 : 


井 content 井 right ul{width:55%; 
height:200px; 
margin: 0px auto; 
margin 一 bottom:10px7 
padding — top:2px; 
text ~ align: center; 
background:url(img/1i_bg. gif);} 
井 content 井 zight ul 1i 井 msg_top{height:20px; 
width:96 % ; 
color: #fff; 
padding — top: 5px; 
margin:0px auto; 
font — weight :bold; 
border:1px solid #fff; 
background: 井 000 url( img/top_bg. gif);} 
井 content 提 right ul ul{color:#fff; 
width:100%; 
height:160px;} 


修改 后 的 “便民 信息 ”部 分 效果 如 图 12-9 所 示 。 
12.2.3 插入 Flash 动画 


在 首页 的 网 站 Logo 右边 还 有 一 个 空位 ,这 是 留 给 Flash 广告 
的 ,插入 Flash 广告 需 使 用 embed 标签 ,由 于 微软 公司 的 系统 补丁 
影响 ,用 这 种 方法 直接 插入 Flash 动画 到 网 页 中 的 文件 中 , 当 IE 浏 
览 器 浏览 时 将 会 产生 虚 框 ,这 会 严重 影响 用 户 的 视觉 感受 ,要 解决 
这 个 虚 框 问题 ,可 采用 程序 动态 输出 标签 的 方式 ,即使 用 图 12-9 “便民 信息 "的 
document. write( ) 方 法 在 页 面 中 输出 HTML 标签 和 文本 。 背景 图 片 
首先 在 js 文件 夹 下 创建 flash. js 文件 ,代码 编写 如 下 : 




















function setFlash(url,w, h){ 
Var txt = '<embed src='+url+'width=' +w+' height =' +h+ '>'; 
txt += '</embed >'; 
document. write( txt); 


a 


在 flash. js 中 定义 的 setFlash() 函数 可 接收 3 个 参数 ,分 别 代 表 swf 文件 的 路 径 、 宽 度 
和 高 度 。 要 在 index. html 中 使 用 这 个 函数 ,必须 在 头 部 加 入 代码 : 


< script type = "text/javascript”src = "js/flash. js"></script> 


后 在 index. html 中 修改 id 名 称 为 swf 的 容器 部 分 ,修改 代码 如 下 : 


<div id= "swf"> 
< script type = "text/javascript"> 
setFlash("swf/swf1. swf", "630", "55"); 
</script> 
</div> 


修改 后 的 浏览 效果 如 图 12-10 所 示 。 
nn RE 
yi uring eon 有 一 个 王 不 定 过 的 于 始 


图 12-10 插入 无 虚 框 的 Flash 动画 











通过 JavaScript 动态 输出 标签 的 方法 很 好 地 解决 了 Flash 动画 的 虚 框 问题 ,插入 其 他 
多 媒体 资源 也 可 以 采用 同样 的 方法 。 


12.2.4 JavaScript 与 Flash 制作 轮换 图 片 


新 闻 图 片 轮换 如 今 流行 于 各 大 网 站 ,而 多 数 网 站 的 轮换 效果 都 是 采用 Flash 动画 制作 
的 ,本 例 的 轮换 动画 效果 参数 由 JavaScript 程序 提供 ,使 用 已 制作 完成 的 Flash 轮换 动画 文 
件 pic. swf( 该 文件 放 在 swf 文件 夹 中 ), 通 过 编写 JavaScript 程序 完成 首页 的 轮换 动画 ,在 
js 文件 夹 中 创建 JavaScript 文件 ,命名 为 pic.js, 编 写 代码 如 下 : 





function picTab( ){ 
Var focus_width= 250; 
var focus_height = 160; 
var text_height = 20; 
var swf_height = focus_height + text_height; 
var pics="'; 
Var links ="''; 
Var texts ="'"'; 
function addTxt (url, img, title){ 
if(picst='){ 
pics= "|" +pics; 
links= "|" +1inks; 
texts= "|"+texts; 
| 
pics= escape( img) + pics; 
links = escape(ur1) + links; 
texts = 七 让 le + texts; 
addTxt( 'http://www. china - orange. com/',' img/newsc. jpg'，' 橘 子 红 了 '); 
addTxt( 'http://www. chinanews.com/'，'img/newsb. jpg'…，' 花 园 城市 '); 
addTxt( 'http://www. jxta. gov. cn/'，' img/newsa. jpg', ' 夜 色 中 的 喷泉 ' ); 
var txt = '< embed src = "swf/pic. swf" wmode= "transparent" 
FlashVars = "pics =' +pics + '&links =' +links+ '&texts =' + texts + '&borderwidth= 
'+focus_width 
+ '&borderheight =' + focus_height + '&textheight =' + text_height + '" menu = "false" quality = 
"high" 








销 合 实例 
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width="'+ focus width +'" height ="' + swf_height +'" allowScriptAccess= 
"sameDomain" type = "application/x— shockwave— flash"/>'; 
document. write( txt); 


': 


本 代码 文件 中 只 有 picTab() 函数 的 定义 ,首先 声明 了 局 部 变量 focus_width、focus_ 
height ,分 别 代表 轮换 图 片 的 宽度 和 高 度 ,还 声明 了 变量 text_height、swf_height, 其 中 text_ 
height 代表 轮换 图 片 下 标题 文字 的 高 度 ,而 swf_height 为 图 片 高 度 和 标题 文字 高 度 之 和 ， 
即 整 个 Flash 动画 的 高 度 。 函 数 体 内 的 函数 addTxt() ,执行 后 用 "|” 拼 接 同 类 型 的 多 个 参 
数 ,方便 Flash 动画 进一步 处 理 。 执 行 addTxt() 函数 时 ,可 传递 3 种 参数 ,分 别 为 链接 地 
址 \ 图 片 路 径 和 图 片 标题 文字 ,读者 可 按 这 个 格式 继续 添加 多 个 addTxt() 函数 。 最 后 将 输 
出 Flash 动画 的 标签 代码 赋值 给 txt 变量 ,这 个 过 程 中 已 经 将 参数 传递 给 Flash 动画 了 ,并 指 
定 了 所 加 载 Flash 动画 的 路 径 , 将 其 在 页 面 中 输出 。 网 页 输出 的 最 终 效果 如 图 12-11 所 示 。 



























































/ 门户 网 站 -首页 - Windows Internet Explorer 
文件 @) 编辑 时) 查看 收藏 夷 信 ) 工具 人 ID) 帮助 匀 
GO Bam 司 | 少 |[x] 入 


次 收藏 严 | 荐 门 户 网 站 -首页 丛 - 园 -局 响 ” 面 -安生 包 ”IO 各 








教育 健康 旅游 美食 IT 论 


， 卫生 部 要 求 区 院 挂号 等 候 时 间 不 起 10 分 名 天 气 预 报 | 交通 违章 
“道路 集中 改进 市 民 出 行政 略 列 本 查询 | 国家 代码 
“坐车 厌 快 等 车 热 ， 系 坐 公 灭 很 纠结 手机 归属 | 伟 育 彩 顶 
“大 力 发 展 房地产 是 饮 焕 止 温 身份 号 码 | 电视 节目 
“才学 生 应 该 多 开心 理 畏 导 课 固 话 区 号 | 邮政 蝙 码 


电话 查 调 | 短 信息 务 
生活 服务 


“课业 宗教 /艺术 宗教 
“ 蓝 修 品 越 涨 价 越 热 实 “ 迫 家 /快递 /汽车 相持 
“与 明 星 同 款 的 时 尚 裙 亡 “ 证 身 / 玉 个 /路 地道 
， 铝 鱼 恤 小 店 全 场 打折 了 一 9 ， 婚 庆 /礼仪 / 羡 花 /摄影 
“ 创意 手工 根 饰 与 您 同行 1 “ 招商 /合作 /融资 /创业 


“ 换 而 工人 /学 村 1 于 子 一 生 的 十 五 人 细节 
“行政 /文秘 /助理 ， 怎 么 给 小 孩子 选择 好 的 书 糖 
.兼职 /促销 /实习 .不 能 用 闪光灯 结 新 生 儿 拍照 
“ 则 务 /会 计 / 出 纳 “宝宝 过 笋 怎么 办 ? 

.其 性 招聘 “美国 记功 家 后 的 灶 育 妃 语 
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12-11 首页 最 终 效 果 


简单 说 ,只 要 在 页 面 中 执行 了 picTab() 函 数 , 即 可 输出 函数 内 所 定义 的 Flash 动画 ,如 
需要 修改 图 片 尺寸 .图 片 路 径 只 需要 编辑 pic. js 的 函数 体 。 


12.2.5 其 他 栏目 的 实现 


栏目 页 面 和 文章 页 面 的 内 容 由 后 台 程 序 生 成 ,一 般 在 大 型 门户 网 站 的 制作 中 ,前 台 页 面 
只 是 简单 制作 样式 和 格式 , 留 下 内 容 接口 给 后 台 程 序 处 理 。 本 书 在 栏目 页 面 和 文章 页 面 中 
不 多 做 介绍 ,其 基本 构建 方式 类 似 于 首页 制作 , 且 顶 部 、 导 航 栏 和 底部 都 与 首页 保持 一 致 ,如 
果 栏 目 页 面 只 实现 本 栏目 的 列表 ,制作 则 非常 简单 ,只 需要 将 前 面 的 index. html 复制 ,再 稍 
做 修改 即 可 。 代 码 编 写 如 下 : 

















<! -- 程序 class.html --> 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/htm1; charset = gb2312" /> 
<title> 门 户 网 站 - 栏目 页 </title> 
< script type = "text/javascript”src = "js/flash. js"></script> 
<link href = "css/style.css" type= "text/css" rel = "stylesheet" /> 
< style type = "text/css"> 
#content{height:600px;} 
井 content 井 left{width:520px7 
height :580px; 
float: left; 
margin:10px; 
background: #fff;} 
井 content 井 left .pro{width:500px; 
height:180px; 
margin— right:10px; 
margin— top:10px; 
float:left; 
background:# fff;} 
井 content 井 left .pro .tt{width:40%; 
height :22px; 
color:#fff; 
padding - bottom:2px; 
text ~ align:center; 
font 一 size:14px; 
font — weight: bold; 
padding - top: 5px; 
background: 井 000 url(img/pro_bg. gif);} 
x* 十 html 井 content 井 left .pro .tt{height:16px; 
Padding ~ top:5px; } 
井 content 井 left 1i ul{background: 井 eee; 
margin 一 top: 一 5px7 
width:100%; 
border — top:1px solid 井 000; 
line ~ height:2. 2em;} 
井 content 井 left .gray{background: 划 ccc;} 





综合 实例 


已 测 
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< option > 保存 一 周 </option> 
<option > 永久 保存 </option> 
</select> 
< input type = "submit" value = "登录 " class = "btn" /> 
< input type = "button"” value = "注册 " class = "btn" /> 
</div> 
</div> 
<div id= "ad"> 
<div id= "logo">< img src = "img/logo. gif" /></div> 
<div id= "swf"> 
< script type = "text/javascript"> 
setFlash("swf/swf1. swf", "630","55"); 
</script> 
</div> 
</div> 
<div id= "nav"> 
<a href = "index.htm" id = "index"> 首 页 </a> 
<a href =" 间 "> 分 类 </a> 
<a href = " 间 "> 投 资 </a> 
<a href =" 井 "> 文娱 </a> 
<a href ="# 井 "> 房产 </a> 
<a href = "# 井 "> 教育 </a> 
<a href ="# "> 健康 </a> 
<a href =" 井 "> 旅游 </a> 
<a href = "# "> 美食 </a> 
<ahref ="#">IT</a> 
<a href =" 井 "> 论坛 </a> 


<div id = "search">< input type = "text" size= "20" value="" />< input type= "button" value = 


"搜索 " class = "btn" /></div> 

</div> 

<div id= "content"> 

<div id = "left"> 
<ul class = "pro"> 
<1li class= "tt"> 热 点 新 闻 </1i> 
< 
<ul> 


<liclass= "gray">*<a href = "article. htm"> 卫 生 部 要 求 医院 挂号 等 候 时 间 不 超 10 分 


钟 </a></1i> 
<1i>: 道 路 集中 改造 市 民 出 行 攻略 </1i> 
<1i class = "gray">- 坐车 凉快 等 车 热 , 乘 坐 公交 很 纠结 </1i > 
<1i>: 大 力 发 展 房地产 是 饮 炮 止 渴 </1i> 
<1i class = "gray">- 小 学 生 应 该 多 开心 理 辅导 课 </1i> 
<1i>: 铁 道 部 八 名 高 官 一 年 内 落马 </1i> 
<1i class = "gray">- 杭 州 出 租车 发 生 大 规模 停 运 </1i> 
<1i>- 南 京 大 型 水 景 工程 成 摆设 </1i> 
<1i class= "gray">- 广 州 停 收 流动 人 员 治 安 联防 费 </1i> 
<1i>: 大 学 生 办 谢 师 宴 花 费 8 万 余 元 </1i> 
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浏览 后 的 效果 如 图 12-12 所 示 。 





三 门户 网 站 -栏目 页 - Windows Internet Explorer 





文件 FE) 篇 辑 于 ) 查看 WD 收 阅 夹 生 ) 工具 了) 帮助 0D 


© | 四 开 \ 实 抽 \partl2\eless htn | ] Liv s ]ioT 


从 收藏 天 | 入门 户 网 站 -栏目 页 E 本 顺 ” 页 面 中 安生- I 上 0D- 发- ” 

















天 气 预 报 | 交通 违章 
“道路 集中 改造 市 民 出 行 攻 略 列车 查询 | 国家 代码 
“ 坐车 凉快 等 车 热 ， 乘坐 公交 很 纠结 手机 归属 | 体育 彩票 
"大 力 发 展 房地产 是 饮 灼 止 渴 身份 号 码 | 电 视 节目 
“小学 生 应 该 多 开心 理 畏 导 课 固 iE 区 号 | 邮政 编码 
“ 铁道 部 八 名 高 官 一 年 内 落马 电话 查询 | 短信 服务 
“杭州 出 粗 车 发 生 大 规模 停 运 
“南京 大 型 水 景 工程 成 摆设 
“广州 停 收 流动 人 员 治 实 联防 费 
“ 大学生 办 谢 师 宾 花 帆 6 万 余 元 
“ 考 家 称 三 峡 工 程 被 妖魔 化 
"全 国 首 个 大 学 生 低 碳 营 启动 
"上 海 首 批 私人 纯 电 动车 上 牌 
“中国 水 价 偏 低 导 致 浪费 ? 
“ 印度 两 季 雷 电 造 成 35 人 死亡 
“ 草 果 公司 拥有 资产 超 美国 政府 
“肯德基 在 华 遭 明 雇 料 门 
“富士康 将 用 机 器 人 代 葵 工人 
， 英国 20 岁 玩家 久 坐 玩 网 游 暴 跨 
“ 以色列 与 黎巴嫩 军队 发 生 交火 
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图 12-12 栏目 列表 页 面 最 终 





六 果 图 

















文章 页 面 的 内 容 与 栏目 页 面 类 似 , 仍 只 需 在 首页 的 页 面 代 码 中 修改 即 可 ， 
为 index. html 中 的 id 名 称 为 left 的 部 分 ,代码 编写 如 下 : 





要 修改 部 分 





<! -- 程序 article. html -一 > 

<html> 

<head> 

<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 门 户 网 站 -文章 页 面 </title> 

< script type = "text/javascript" src= "js/flash. js"></script> 

< link href = "css/style.css" type= "text/css" rel = "stylesheet" /> 

< style type = "text/css"> 

提 content{height:590px;} 
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<1i> 你 现在 的 位 置 : 
<a href = "index. htm"> 首 页 </a>--<a href = "class.htm"> 热 点 新 闻 </a>- 正文 
</1i> 
<1li class = "tt"><h3 > 卫生 部 要 求 医院 挂号 等 候 时 间 不 超 10 分 钟 </h3 ></1i> 
<1iclass= "tt"> 发 表 时 间 : 2011-7- 25</1i> 
<1li class = "tt"> 作 者 : 佚名 </1i> 
<1li id= "ptxt"> 
<p> 本 报 讯 : 卫 生 部 日 前 给 出 "三 好 一 满意 "活动 的 分 解 指标 , 医院 要 合理 安排 门 急诊 服 
务 ,简化 门 急诊 服务 流程 。 挂 号 `. 划 价 , 收 费 . 取 药 等 服务 窗口 等 候 时 间 不 能 超过 10 分 钟 。 
</p> 
<p>" 三 好 一 满意 "活动 即 "服务 好 、 质 量 好 、 医 德 好 ,群众 满意 "活动 ,是 卫生 部 在 全 国 各 级 医疗 机 构 ， 
重点 是 二 级 以 上 公立 医院 开展 的 。</p> 
<H3 > 窗口 等 候 不 超 十 分 钟 </h3 > 
<p> 患 者 在 医院 进行 化 验 检查 之 后 ,出 结果 时 间 过 长 经 常 让 人 "头疼 "。 卫 生 部 此 次 要 求 ,超声 自 检查 
开始 到 出 具 结 果 时 间 不 超过 30 分 钟 。 而 大 型 设备 检查 项 目 自 开 具 检 查 报告 申请 单 到 出 具 检查 结果 
时 间 不 超过 48 小 时 。 
</p> 
<p> 另 外 , 血 、 尿 、 便 常规 检验 、 心 电 图 、 影 像 常规 检查 项 目 , 自 检查 开始 到 出 具 结果 时 间 不 超过 30 分 
钟 。</p> 
<p > 卫生 部 要 求 ,各 医院 要 合理 安排 门 急 诊 服务 ,简化 门 急诊 和 入 、 出 院 服 务 流程 。 挂 号 、 划 价 、 收 费 、 
取 药 等 窗口 等 候 时 间 不 超过 10 分 钟 。</p> 
<h3 > 可 提供 短信 查 检验 结果 </h3 > 
<p> 很 多 患者 有 这 样 的 经 历 , 医生 开 了 化 验 单 之 后 ,有 些 可 以 当天 出 结果 ,但 是 有 些 却 要 等 待 一 段 时 
间 , 而 拿 到 结果 之 后 ,患者 才能 进行 复诊 , 这样 很 多 患者 或 者 家 属 不 得 不 往返 多 次 来 院 查询 检查 检验 
的 结果 。</p> 
<p> 卫 生 部 要 求 ,医院 要 提供 方便 快捷 的 检查 结果 查询 服务 。 除 向 患者 提供 纸 质 检查 检验 结果 报告 
单 外 ,还 可 以 提供 现场 ,电话 ,短信 、 网 络 查询 中 至 少 1 项 查询 方式 。</p> 
<p> 另 外 ,卫生 部 还 要 求 各 地 在 加 强 医 疗 质量 控制 的 基础 上 , 推进 同 级 医疗 机 构 检查 、 检 验 结果 互 认 
工作 ,促进 合理 检查 ,降低 患者 就 诊 费用 。 互 认 项 目 包 括 医学 检验 和 医学 影像 两 大 类 。</p> 
</1i> 
</ul> 
</div> 
<div id= "right"> 
<ul> 
<1i id = "msg_top"> 便 民 信 息 </1i> 
<1i> 
<ul> 
<1i> 天 气 预 报 | 交通 违章 </1i> 
<1i> 列 车 查询 | 国家 代码 </1i> 
<1i> 手 机 归属 | 体育 彩票 </1i> 
<1i> 身 份 号 码 | 电 视 节目 </1i> 
<1i> 固 话 区 号 | 邮政 编码 </1i> 
<1i> 电 话 查 询 | 短 信服 务 </1i> 
</ul> 
</1i> 
</ul> 
<h4 > 热点 人 物 </h4 > 
<div> 
< img src = "img/doga. jpg" /> 
<img src="img/dogb. jpg” /> 
</div> 
</div> 
</div> 


< div id= "bottom"> 
<h5 > 公司 地 址 : 江西 省 XX 大 厦 zx 楼 < br /> 


服务 热线 : 0791- 3100000 转 000 传真 : 0791- 4310000 E-mail: admin@yiluxing.com<br /> 


版 权 所 有 @2005 - 2010 依 路 传媒 <br /> 
乾 ICP 备 0000000 号 </h5 > 

</div> 

</body> 

</html > 





浏览 效果 如 图 12-13 所 示 。 
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GO Bementia te 画 同 | 区 
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用 户 各 WN 5 ES 





你 现在 的 位 置 : 首页 
卫生 部 要 求 医院 挂号 等 候 时 间 不 超 10 分 钟 
发 表 时 间 ，2011-7-25 
作者 : 佚名 

本 报 讯 :卫生 部 日 前 给 出 “三 好 一 满意 ”活动 的 分 解 指标 ， 医 院 要 合理 安排 门 急诊 服务 、 简 
化 门 名 诊 服务 流程 ， 挂 号、 划 价 、 收 费 、 取 药 等 服务 窗口 等 候 时 间 不 能 超过 10 分 钟 ， 

“三 好 一 满意 ”活动 即 “服务 好 、 质 量 好 、 医 管 好 ,群众 满意 ”活动 ， 是 卫生 部 在 全 国 各 
级 医疗 机 构 ， 重 点 是 二 级 以 上 公立 医院 开展 的 。 
窗口 等 候 不 起 十 分 钟 

息 者 在 医院 进行 化 验 检查 之 后 ,出 结果 时 间 过 长 经 常 让 人 “ 头 闭 ”。 卫 生 部 此 次 要 求 ， 超 
声 自 检查 开始 到 出 具 结 果 时 间 不 超过 30 分 钟 。 而 大 型 设备 检查 项 目 自 开 具 检 查 报 堂 申请 单 到 出 
具 检查 结果 时 间 不 超过 48 小 时 。 

另外 ， 血 、 尿 、 便 常规 检验 、 心 电 图 、 影 像 常规 检查 项 目 ， 自 检查 开始 到 出 具 结果 时 间 不 
超过 30 分 钟 。 

卫生 部 要 求 ， 各 医院 要 合理 安排 门 急诊 服务 、 简 化 门 急诊 和 入 、 出 院 服务 流程 。 挂 号 、 划 
价 、 收 费 、 取 药 等 窗口 等 候 时 间 不 超过 10 分 钟 。 
可 提供 短信 查 检验 结果 

很 多 患者 有 这 样 的 经 历 ， 医 生 开 了 化 验 单 之 后 ， 有 些 可 以 当天 出 结果 ， 但 是 有 些 却 要 等 待 


一 段 时 间 ,而 拿 到 结果 之 后 ,上 韦 者 才能 进行 复诊 ,这样 很 多 圳 者 或 者 家 属 不 得 不 往返 多 次 来 院 
查询 检查 检验 的 结果 。 

卫生 部 要 求 ， 医院 要 提供 方便 快捷 的 检查 结果 查询 服务 。 除 向 患者 提供 纸 质 检 查 检验 结果 
报告 单 外 ， 还 可 以 提供 现场 、 电 话 、 短 信 、 网 络 查询 中 至 少 1 项 查询 方式 

另外 ,卫生 部 还 要 求 各 地 在 加 强 医 疗 质量 控制 的 基础 上 ,推进 同 级 医疗 机 构 检查 、 检 验 结 
果 互 认 工 作 ， 促进 合理 检查 ,降低 患者 就 诊 锦 用 。 互 认 项 目 包括 医学 检验 和 医学 影像 两 大 类 。 
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该 门户 网 站 的 3 个 主要 模板 制作 已 经 完成 ,通过 后 台 程 序 的 处 理 可 以 生成 大 量 的 栏目 
页 面 和 文章 页 面 .并 且 有 着 一 致 的 样式 风格 ,导航 栏 中 还 需要 制作 的 页 面 ,读者 可 自己 制作 
添加 。 


12.3 网 站 发 布 


网 站 设计 全 部 完成 之 后 ,需要 将 自己 的 网 站 进行 发 布 , 在 发 布 网 站 之 前 还 须 先 进行 网 站 
的 测试 。 除 了 要 对 所 有 影响 页 面 显示 的 细节 元 素 进行 测试 外 ,关键 是 要 检测 页 面 中 的 链接 
是 否 正常 跳 转 , 以 及 改变 文件 的 路 径 是 否 显示 正常 。 如 果 测 试 都 正常 了 ,就 可 以 将 网 页 发 布 
到 Internet 上 ,让 所 有 的 用 户 进行 浏览 。 


12.3.1 注册 域名 


注册 域名 是 任何 要 在 网 上 建立 站 点 的 单位 必须 要 做 的 第 一 步 。 前 面 完成 了 网 站 中 3 个 
页 面 的 制作 ,整个 网 站 技术 部 分 基本 完成 ,最 后 需要 把 网 站 发 布 到 ISP 的 服务 器 中 ,而 ISP 
的 服务 器 空间 只 有 IP 地 址 ,为 了 方便 其 他 浏览 用 户 浏览 网 站 ,还 需要 注册 一 个 域名 。 域 名 
申请 的 一 般 步骤 如 下 : 

(1) 准备 申请 资料 : cn 域名 目前 个 人 不 允许 申请 注册 ,要 申请 则 需要 提供 企业 营业 执照 。 

(2) 寻找 域名 注册 商 : 由 于 com、cn 域名 等 不 同 后 级 均 属于 不 同 注册 管理 机 构 所 管理 ， 
因此 如 果 要 注册 不 同 后 缀 域名 则 需要 从 注册 管理 机 构 寻 找 经 过 其 授权 的 顶级 域名 注册 服务 
机 构 。 如 com 域名 的 管理 机 构 为 ICANN( 互 联网 名 称 与 数字 地 址 分 配 机 构 ) ,cn 域名 的 管 
理 机 构 为 CNNIC( 中 国 互联 网 络 信息 中 心 )。 若 注册 商 已 经 通过 ICANN、CNNIC 双重 认 
证 , 则 无 须 分 别 到 其 他 注册 服务 机 构 申 请 域名 。 

(3) 查询 域名 : 在 注册 商 网 站 点 击 查询 域名 ,选择 要 注册 的 域名 ,并 点 击 注册 。 

(4) 正式 申请 : 查 到 想 要 注册 的 域名 并 确认 域名 为 可 申请 的 状态 后 ,提交 注册 ,并 缴纳 
年 费 。 

(5) 申请 成 功 : 正式 申请 成 功 后 , 即 可 开始 进入 DNS 解析 管理 .设置 解析 记录 等 操作 。 

专家 点 拨 : 由 于 域名 存在 一 个 有 效 期 ,若是 申请 一 年 有 效 期 ,在 有 效 期 过 后 ,需要 及 时 
进行 续费 ,否则 域名 将 会 在 到 期 后 自动 删除 ,网 站 等 其 他 服务 也 将 会 被 迫 停止 。 一 般 注 册 商 
都 会 在 到 期 前 进行 提醒 。 


12.3.2 上 传 网 站 


域名 注册 完成 后 , 接 下 来 的 事 可 以 让 ISP( 互 联网 服务 提供 商 ) 来 完成 ,ISP 将 提供 FTP 
地 址 (有 的 不 支持 FTP 上 传 的 只 能 用 Web 上 传 了 ) ,还 有 一 个 用 户 名 和 密码 ,以 便 用 户 将 自 
己 的 网 站 上 传 到 服务 器 空间 。 只 要 下 载 一 个 FTP 上 传 工 具 , 输 入 用 户 名 和 密码 后 ,把 本 地 
的 网 站 传 上 去 就 可 以 了 。 

传 完 网 站 后 ,就 可 以 用 申请 的 域名 直接 访问 了 。 

网 站 发 布 后 并 不 表示 所 有 的 工作 都 完成 了 , 随 着 网 站 的 发 布 ,后 期 还 需要 对 网 站 进行 维 
护 , 不 断 更 新 网 站 的 信息 ,从 而 使 网 站 的 运行 更 加 稳定 。 











附录 A 习题 参考 答案 





第 1 章 
一 、 选 择 题 
BC A DBD 
二 、 填空 题 
1. 首页 (或 主页 ) 
2. DOCTYPE、 过 渡 型 
3. 双 标 记 、 单 标记 
4. 空格 
5. <meta> name 


一 、 选 择 题 
二 

二 、 填空 题 

1. &.nbsp 

2. 无 序列 表 、 有 序列 表 

3. < bgsound src= "url" loop="#"> 


第 3 章 


一 、 选 择 题 
和 
二 、 填 空 题 

. 锚 点 链接 

. 服务 器 协议 
ek 

紫 

. mailto: 

. 特定 位 置 


.<area> 


~ 中 oo 
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8. <a href="mailto:cai8net@ sohu. com"> 
第 4 章 


一 、 选 择 题 
WB SB DD 
二 、 填空 题 

<caption> 

border 


. 框架 集 


第 5 章 


一 、 选 择 题 

如 康定 和 DD CC 
二 、 填空 题 

. 信息 交换 

. 表单 


. post 


. 提交 表单 


2 

3 

4. readonly 
5 

6. name 

7. post 


8. selected 
第 6 章 


一 、 选 择 题 

l.C 2A3C4A 5.D 
二 、 填空 题 

1. Cascading Style Sheets 

2. 7/¥: 

3. 伪 类 和 伪 元 素 

4. 网 页 结构 

5. rel= "stylesheet" 

6. <p></p>、<body ></body > 


wi 


第 7 章 


B 2C 3C4A 5.D 6.D 


.<div class 一 "ab"> </div> 


both 


. margin 
. none 


. 块 状元 素 、 内 联 元 素 


第 8 章 
、 选 择 题 


| 


、 填 空 题 


. text-decoration, underline 
.line-height:normal| 数 字 | 长 度 | 百 分 比 
. text-align 

.scroll 

. color 


. clip 


第 9 章 
、 选 择 题 


5 


、 填 空 题 


. 顺序 结构 .选择 结构 和 循环 结构 
.switch 
. 双 斜 线 “//” 


for…in 
第 10 章 
、 选 择 题 


“CB 人 SB B55.A 


、 填空 题 


. 基本 内 置 对 象 、. 宿 主 对 象 
. 确认 按钮 
. Date() 


习题 参考 答案 
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4. 服务 器 
5. 连接 合并 


一 、 选 择 题 

BD 
二 、 填空 题 

1. 显 式 声明 、 手 工 触发 
2. 事件 的 驱动 


3. event 





4. onmouseover 


图 书 资源 支持 








感谢 您 一 直 以 来 对 清华 版 图 书 的 支持 和 爱护 。 为 了 配合 本 书 的 使 用 ,本 书 
提供 配套 的 资源 ,有 需求 的 读者 请 扫描 下 方 的 “ 书 圈 " 微 信 公 众 号 二 维 码 , 在 图 
书 专区 下 载 ,也 可 以 拨打 电话 或 发 送 电子 邮件 咨询 。 

如 果 您 在 使 用 本 书 的 过 程 中 遇 到 了 什么 问题 ,或 者 有 相关 图 书 出 版 计划 ， 
也 请 您 发 邮件 告诉 我 们 ,以 便 我 们 更 好 地 为 您 服务 



















































































我 们 的 联系 方式 : 
地 址 : 北京 海淀 区 双 清 路 学 研 大 厦 A 座 707 


资源 i 二 申请 


邮 编 : 100084 
电 话 : 010 一 62770175 一 4604 


资源 下 载 : http://www.tup. com. cn 





电子 邮件 : weijj@tup.tsinghua. edu. cn 
QQ: 883604( 请 写 明 您 的 单位 和 姓名 ) 
用 微 信 扫 一 扫 右 边 的 二 维 码 , 即 可 关注 清华 大 学 出 版 社 公 众 号 “ 书 圈 ”。 


